sohyeon kim

💡 리액트 공식문서 정리 : State 관리하기 - State 로직을 리듀서로 작성하기, Context 를 사용해 데이터를 깊게 전달하기, Reducer 와 Context 로 앱 확장하기 5.  State 로직을 reducer 로 작성하기 여러 이벤트 핸들러를 통해 많은 state 업데이트가 이루어지는 컴포넌트는 관리하기 어려울 수 있다.이를 위해 컴포넌트 외부에서 'reducer'라는 단일 함수를 사용해 모든 state 업데이트 로직을 통합할 수 있다.이벤트 핸들러는 오로지 사용자의 'action'만을 명시하므로 간결해진다. reducer 를 사용해 state 로직 통합하기아래의 TaskApp 컴포넌트는 state 에 tasks 배열을 보유하고 있고, 세 가지 이벤트 핸들러를 통해 task 를 추가,..

💡 리액트 공식문서 정리 : State 관리하기 - 컴포넌트 간 State 공유하기, State 를 보존하고 초기화하기 3. 컴포넌트 간 State 공유하기 : state 를 부모 컴포넌트로 끌어올려 props 로 내려준다.두 컴포넌트의 state 가 항상 함께 변경되기를 원할 때➡️ 각 컴포넌트에서 state 를 제거하고 가장 가까운 공통 부모 컴포넌트로 옮겨 props 로 전달한다. 아래에서 각 패널은 독립적인 state 를 가지고 있어 show 버튼을 눌러도 다른 패널에 영향을 미치지 않는다.function Panel({ title, children }) { // 비제어 컴포넌트. 부모로무터 제어되지 않는다. const [isActive, setIsActive] = useState(false);..

💡 리액트 공식문서 정리 : State 관리하기 - State 를 사용해 Input 다루기, State 구조 선택하기애플리케이션이 커짐에 따라 state 가 어떻게 구성되는지, 데이터가 컴포넌트 간에 어떻게 흐르는지에 대해 파악해두면 도움이 된다.불필요하거나 중복된 state 는 버그의 흔한 원인.state 를 잘 구성하는 방법, state 업데이트 로직을 유지 보수 가능하게 관리하는 방법,멀리 있는 컴포넌트 간의 state 공유 방법에 대해 알아보자. 1. State 를 사용해 input 다루기 : 선언형 UI, 선언형 프로그래밍UI를 세밀하게 직접 조작하는 것(명령형)이 아니라 각각의 시각적 state로 UI를 묘사하는 것을 의미.React 에서는 (코드로) UI 를 직접 조작할 필요가 없다. 대신..