Reducer와 Context를 조합하여 앱 전체에 거친 업데이트를 관리할 수도 있다. before export default function TaskApp() { const [tasks, dispatch] = useReducer( tasksReducer, initialTasks ); function handleA...
Principle for structuring state
https://react.dev/learn/choosing-the-state-structure 리액트에서 상태 구조를 짤 때의 원칙들에 대해서 소개하는 섹션이다. DB의 정규화처럼 실수나 버그가 발생할 부분을 줄이는 것이 목적이다. Group related state ```js // BAD const [x, setX] = useState(0)...
Preserving and resetting state
신 가이드 : https://react.dev/learn/preserving-and-resetting-state Summary 리액트에서 컴포넌트의 상태(State)는 UI 트리(Virtual Dom)의 위치에 연결되며, 같은 위치에서 컴포넌트가 계속 렌더링될 때 상태가 유지되고, 다른 위치로 이동하거나 삭제될 때 상태가 재설정됩니다. 상태를...
Extracting state logic into a reducer
https://react-ko.dev/learn/extracting-state-logic-into-a-reducer 컴포넌트 내 여러 이벤트핸들러에 복잡한 상태 업데이트 로직이 흩어져있다면 reducer를 사용하는 것이 좋을 수 있다. before const [tasks, setTasks] = useState(initialTasks);...
You might not need an effect
https://ko.react.dev/learn/you-might-not-need-an-effect Effect에서 외부 시스템과 상호작용하지 않을 경우 Effect가 필요없을 수 있다. 불필요한 Effect를 제거하면 코드를 더 쉽게 따라갈 수 있고, 실행 속도가 빨리지며, 오류 발생 가능성이 줄어든다. 불필요한 Effect들 렌더링을 위...
Synchronizing with effects
https://react-ko.dev/learn/synchronizing-with-effectss Effect로 특정 이벤트가 아닌 렌더링 자체로 발생하는 사이드 이펙트를 명시할 수 있다. Effect는 화면 업데이트 후 커밋이 끝날 때 실행되며 이때가 React 컴포넌트를 일부 외부 시스템과 동기화하기에 좋은 시기이다. You might not ...
Separating events from effects
https://react-ko.dev/learn/separating-events-from-effects 이벤트핸들러는 같은 상호작용을 다시 수행할때만 다시 실행된다. Effect는 props 또는 state의 변경 시 동기화를 위해 실행된다. 때때로 일부 값에 대한 응답으로 다시 실행되는 Effect와 그렇지 않은 Effect의 혼합이 필요할 때가 ...
Reusing logic with custom hooks
https://react-ko.dev/learn/reusing-logic-with-custom-hooks Custom Hooks : Sharing logic between components 여러 컴포넌트에서 반복되는 로직을 custom hook으로 뽑을 수 있다. Hook names always start with use React 컴포...
Removing effect dependencies
https://react-ko.dev/learn/removing-effect-dependencies Effect에서 linter는 Effect의 의존성 목록에 Effect가 사용하는 모든 반응형 값을 포함했는지 확인한다. 이때 linter를 무시할 수 있지만 지키는 것이 좋다. 따라서 무시하기보단 불필요한 의존성을 없애는 것이 좋다. 불필요한 의존성...
Refs for referencing values
신가이드 : https://react.dev/learn/referencing-values-with-refs Summary 🔑 리액트 컴포넌트에서 정보를 “기억”하되 해당 정보가 새로운 렌더링을 트리거하지 않도록 하려면 ref를 사용할 수 있습니다. ref는 컴포넌트 외부와 통신하거나 브라우저 API와 상호작용하는 경우에 유용하며, 렌더링과 무...