JAM Development

🎯 useEffect란 무엇일까?useEffect는 **"부수 효과(Effect)"**를 처리하기 위한 도구예요.부수 효과란?컴포넌트가 렌더링될 때마다 함께 실행되어야 하는 추가 작업이라고 생각하면 돼요.예를 들어, 이런 작업들이 있어요:데이터 가져오기 (API 호출)브라우저에 무언가를 변경하기 (예: 타이틀 변경)타이머나 구독 설정하기이런 작업들은 컴포넌트가 화면에 나타나거나 업데이트될 때 자동으로 실행되게 해야겠죠?바로 그때 useEffect가 필요해요! 🏠 집안일 이야기로 이해하기집에 손님이 오면 집을 청소해야 하잖아요? 🧹집(컴포넌트)이 화면에 나타나거나 바뀔 때**"청소하기(부수 효과)"**라는 일을 실행해야 하죠.useEffect는 이런 "집안일" 같은 추가 작업을 맡아주는 친구예요. ?..

🎯 useDeferredValue란 무엇일까?useDeferredValue는 값을 조금 늦게 업데이트해서 화면 렌더링 속도를 최적화하는 도구예요.왜 필요할까요?React에서는 입력이 빠르게 바뀔 때마다 화면을 바로바로 렌더링하는데,너무 많은 작업이 동시에 일어나면 화면이 느려질 수 있거든요.이때 useDeferredValue를 사용하면 우선순위를 나눠서 렌더링을 효율적으로 해줘요. 🐢 거북이와 토끼 이야기로 이해해보기거북이와 토끼가 산책을 하고 있어요. 🐢🐇토끼는 빠르게 뛰어가고,거북이는 천천히 따라옵니다.여기서 **"토끼"**는 입력값이고, **"거북이"**는 useDeferredValue로 처리되는 값이에요. 🍃 실생활 예시: 검색창예를 들어, 여러분이 쇼핑몰에서 물건을 검색한다고 해볼게요...

🎯 useDebugValue란 무엇일까?**useDebugValue**는 React 개발자 도구(React DevTools)에서 커스텀 훅을 더 쉽게 디버깅할 수 있도록 도움을 주는 도구예요.커스텀 훅이란?여러 React 훅(useState, useEffect 등)을 조합해서 나만의 훅을 만드는 거예요.예를 들면 useUserData, useFetchData 같은 것들이요.**useDebugValue**를 사용하면 이 커스텀 훅이 어떤 값을 반환하는지를 React 개발자 도구에서 한눈에 확인할 수 있어요.디버깅할 때 아주 유용하답니다! 🔍 📦 택배 상자 이야기로 이해해보기커스텀 훅은 마치 택배 상자 같아요. 📦택배 상자(커스텀 훅) 안에 뭐가 들어있는지 겉으로는 보이지 않아요.하나씩 열어보면서 확..

🎯 useContext란 무엇일까?**useContext**는 React 컴포넌트들 사이에서 데이터를 쉽게 공유할 수 있게 도와주는 도구예요.React에서는 **"상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달"**할 때 props를 사용하죠.그런데 컴포넌트가 많아지면 데이터 전달이 점점 귀찮아져요.마치 릴레이 경주처럼 데이터를 계속 넘겨줘야 하니까요!useContext를 사용하면 중간에 데이터를 넘겨줄 필요 없이 바로 원하는 컴포넌트에 데이터를 전달할 수 있어요. 🍔 햄버거 가게 이야기로 이해해보자여러분이 햄버거 가게를 운영한다고 생각해 보세요. 🍔이번엔 **햄버거의 "소스"**를 예로 들어 볼게요! 1. props로 전달하는 경우 (불편한 상황)상위 컴포넌트(주방)에서 소스 정보를 하위 컴포넌트..

🧠 useCallback이 뭐예요?useCallback은 함수를 기억해두는 React의 도구예요.쉽게 말해서, "불필요하게 함수를 새로 만들지 않도록" 도와줘요.왜 이게 필요하냐고요?React에서는 컴포넌트가 업데이트될 때마다 함수도 새로 만들어질 수 있어요.이렇게 새로 만들어진 함수가 많아지면 성능에 안 좋은 영향을 줄 수 있거든요. 🍳 요리 이야기로 이해하기여러분이 요리사라고 상상해보세요. 👩‍🍳👨‍🍳레시피를 보고 계란후라이를 만드는 함수를 매번 새로 적는다고 생각해 보세요.첫 번째 요리: 계란후라이 레시피 작성 📝두 번째 요리: 또 계란후라이 레시피 작성 📝세 번째 요리: 또 또 계란후라이 레시피 작성 📝너무 비효율적이지 않나요? 똑같은 레시피를 왜 계속 새로 쓰죠?한 번만 레시피를..

🎯 useActionState란 무엇일까?React에서는 상태(state)라는 개념이 중요해요.상태는 화면에 보여주는 데이터의 현재 상태라고 생각하면 돼요.예를 들어:카운터 앱에서 숫자가 올라가는 것도 상태로그인 폼에서 입력하는 이메일과 비밀번호도 상태그럼 useActionState는 뭐냐고요?**"어떤 행동(action)에 따라 상태를 관리할 때 쓰는 도구"**라고 생각하면 돼요. 🍔 햄버거 가게 이야기로 알아보기여러분이 햄버거 가게를 운영한다고 상상해볼까요? 🍔손님이 와서 햄버거 주문을 합니다. (이게 액션!)이때 가게는 주문받은 메뉴를 확인하고, 주문 리스트에 추가하겠죠? (이게 상태 업데이트!)여기서 중요한 포인트는 주문(액션)에 따라 가게 상태(주문 리스트)가 변한다는 것이에요.이걸 Rea..

타입스크립트가 등장 배경을 간략히 설명하면기존의 자바스크립트에서 발생하던 런타임 에러를 최소화하고 개발자의 실수를 최대한으로 줄여 웹애플리케이션의 품질을 보다 향상 시키는것을 목표로 한다.  기존의 자바스크립트의 문제점은 개발자가 코드를 작성하는 대로실행 후 런타임때에 에러를 발생시킨다.  -- 대표 예시 1Q. 숫자와 문자를 더하기function test(a, b){return a + b;}console.log(test(1,"A")); 결과 "1A"라는 문자열을 리턴한다.   -- 대표 예시2Q. 문자와 문자 나누기function test(a, b){return a / b;}console.log(test("A","B")); 결과  이러한 에러는 타 언어에서는 런타임(Runtime)시점이 아닌 컴파일(C..

React의 기능에는 props라는 부모와 자식 컴포넌트 간의 통신을 할때, 부모 컴포넌트가 자식 컴포넌트한테 원하는 데이터를 보내는것을 의미한다. 이러한 점은 커스텀 버튼 이나 다양한 함수로서 사용이 편리하다 .하지만  props는 오브젝트로 오직 한개의 props만 보낼 수 있고, props 오브젝트안의 파라미터 구성은 여러개 가능하다. props는 기본 방법이 있고, 단축어 방법이 있다.   function Btn(props) { console.log(props.text, "이 렌더링되었습니다."); return ( {props.text} ); }const MemorizedBtn = React.memo(Btn); fu..