React 정복하기

사용자 인터페이스(UI) 를 만들기 위한 자바스크립트 라이브러리컴포넌트 단위로 UI를 쪼개서 관리할 수 있음자바스크립트에 정적 타입을 더한 언어실수를 줄여주고, 안정성을 높임App.tsx

1\. Props (컴포넌트에 값 전달하기)2\. useState (컴포넌트 내부에서 상태 관리하기)컴포넌트에 값을 전달하는 방법. 부모 → 자식 컴포넌트로 데이터를 보낼 때 사용HelloProps 라는 타입을 만들어서 props 의 타입을 명시Hello 컴포넌트는 n

1️⃣ axios 설치 2️⃣ 사용자 타입 정의 3️⃣ API 호출 컴포넌트 4️⃣ App.tsx 에서 호출 🚀 핵심 정리 |개념|설명| |-|-| |axios.get()|제네릭으로 응답 데이터 타입 지정| |useEffect|컴포넌트가 처음 렌더링될 때 1번만 실행됨| |useState|데이터 상태와 로딩 상태 관리| |map()|리스트를 컴포넌...

react-hook-form 설치적용 코드

1️⃣ 라우팅 설치 2️⃣ 기본 사용법 3️⃣ 페이지 간 이동하기: Link 🚀 핵심 요약 |항목|설명| |-|-| |BrowserRouter|라우팅을 위한 최상단 컴포넌트| |Routes / Route|페이지 매칭 & 렌더링| |Link|페이지 이동 시 새로고침 없이 전환|

실무에서는 axios.get(...) 같은 호출을 컴포넌트 안에 쓰지 않고 별도 디렉토리를 만들어서 API 요청만 따로 관리코드 재사용이 쉬움유지보수 편함

React 에서 컴포넌트끼리 데이터를 공유하려면 props 로 계속 전달해야 함하지만 컴포넌트가 많아지면..그래서 모든 컴포넌트가 공유하는 상태는 "전역 상태 관리" 로 분리💡 로그인 사용자 정보 UserContext 로 관리