React 3

[React] Context API 개념 및 사용 방법 정리

React Context API란?컴포넌트에 props를 직접 전달하지 않고 여러 컴포넌트 간에 전역으로 상태를 쉽게 공유하고 관리할 수 있게 해준다.일반적으로 React에서는 데이터를 위에서 아래로(부모 -> 자식) props를 통해 전달하는데, 실제로 개발을 하다보면 목표 컴포넌트까지 props를 전달해주기 위해 여러 컴포넌트를 통과해야 하는 props drilling 문제가 발생하게 된다. 이 문제를 해결하기 위해 전역으로 관리할 수 있게 React에서 만든 것이 바로 Context API이다.주로 UI 테마(라이트 모드, 다크 모드 등), 언어 설정, 인증된 사용자 등 전역으로 사용될 수 있는 상태를 공유할 때 사용된다. 그렇다면 전역 상태 관리를 할 때 사용하면 되는가?그건 아니다.전역으로 관리..

React 2024.11.26

[React] ReactNode / ReactElement / JSX.Element 의 차이

프로젝트 태스크를 진행하다가 children 타입을 React.ReactElement; 로 두고 태스크 완성한 걸 PR에 올려두었다. 여기서 받은 다른 팀원 분의 질문요기 ReactNode가 아니라 ReactElement로 타입 좁혀놓으신 이유가 있을까용? 이 질문을 보면서 ReactNode와 ReactElement의 차이를 제대로 설명을 할 수 있어야겠다고 생각하여 공부하면서 이 포스트에 정리해보겠다. children의 타입으로 사용하는 타입에는 크게 ReactNode와 ReactElement가 있다.  ReactNode-> 클래스형 컴포넌트의 리턴값에 해당ReactNode는 JSX에서 children으로 전달될 수 있는 모든 타입을 가질 수 있다.string, number, boolean, null,..

React 2024.06.25

[React / Recoil] Link 태그와 a 태그의 차이(userState가 undefined가 생기는 문제)

recoil로 상태 관리를 했는데 userState가 바뀌면 안되는데 자꾸 상태 데이터가 날라가는 사태가 발생…로직 문제인 줄 알았는데 알고 보니 "a 태그" 때문이었던 것덕분에 a 태그와 Link 태그의 차이점을 크게 알았다.- 페이지를 전환할 때 a 태그의 href 속성을 사용하여, 새로운 페이지에서 'userState' 값을 초기화한다.- 이는 페이지 이동 시 새로운 컴포넌트가 마운트되고 초기화되기 때문에 발생- 페이지를 새로 불러오지 않고 (컴포넌트가 마운트되는 대신) 라우터가 컴포넌트를 변경하고 상태를 유지한다.- 페이지 주소만 변경하여 상태는 초기화되지 않는다메모메모…

React 2023.06.19