본문 바로가기

useContext

(2)
React Hooks #3 - Hooks(useContext) Passing down as Props 컴포넌트 간 상태를 공유하기 위해서 Props를 서로 내려주는 상황이 많이 발생합니다. 쇼핑을 하기 위해서 상단의 검색어를 입력하면, 중단의 검색 결과와 하단의 검색 항목들이 변하게 됩니다. 또한 하단의 정렬 조건의 선택에 따라서 하단의 검색 항목들이 변하게 됩니다. 검색 항목들을 새롭게 가져오는 함수는 특정 컴포넌트에 종속되며 props로 전달하는 방식 혹은 데이터들을 props로 전달하는 방식을 선택할 수 있습니다. 또한 만약 적은 데이터 수를 가지고 있다면 정렬 조건에 따라서 기존 가지고 있던 데이터들을 새로 불러오는 것이 아니라 데이터들을 정렬하는 상황이 있을 수 있습니다. 컴포넌트 간 바로 연결되어 있는 정보들을 props로 전달하는 것은 명확한 소스 코드..
React Hooks #2 - Hooks(useReducer) useState 클래스 컴포넌트에서 사용하는 this.setState와 같은 기능으로 컴포넌트 내부의 상태를 관리할 수 있습니다. 간단한 예제 : (https://reactjs.org/docs/hooks-state.html) // usage // const [value, setValue] = useState(initialValue); import React, { useState } from 'react'; function Example() { const [count, setCount] = useState(0); return ({count}); }; 만약 두 개 이상의 특정 값을 확인하고 해당 값에 대해서 변화가 있을 경우 동시성(synchoronicity)을 보장하는 re-render를 하려고 한다면, ..