FrontEnd/React7 [ React ] useState vs useReducer useState state의 초깃값을 인수로 받는다. 길이 2인 배열을 반환한다.: state, setState(업데이트함수) const [state, setState] = useState(initialValue) useReducer 로 useState 구현하기 function reducer (prevState,newState) { return typeof nesState === ‘function’ ? newState(prevState) : newState } function init (initialArg:Initializer) { return typeof initialArg === ‘function’ ? initialArg() : initialArg } function useState (initialA.. 2024. 1. 15. [ React ] useReducer const [state, dispatch] = useReducer(reducer, initialArg, init?) useReducer 는 useState의 심화 버전으로 볼 수 있다. 단순히 number 나 boolean과 같이 간단한 값을 관리하는 것은 useState로 충분하지만, state 하나가 가져야 할 값이 복잡하고 이를 수정하는 경우의 수가 많아진다면 state를 관리하는 것이 어려워진다. 또 여러 개의 state를 관리하는 것보다 때로는 성격이 비슷한 여러 개의 state를 묶어 useReducer로 관리하는 편이 더 효율적일 수도 있다. Parameters reducer initialArg init (선택) : useState에 함수를 넘겨줄 때처럼 초깃값을 지연해서 생성시키고 싶을 때.. 2024. 1. 15. [ React ] useContext a React Hook that lets you read and subscribe to context from your component context란? 리액트 어플리케이션은 기본적으로 부모 컴포넌트와 자식 컴포넌트로 이뤄진 트리 구조를 갖고 있습니다. 그래서 부모가 가지고 있는 데이터를 자식에서도 사용하고 싶다면 props로 데이터를 넘겨줘야 합니다. 전달해야 하는 데이터가 있는 컴포넌트와 전달받아야 하는 컴포넌트의 거리가 멀어질수로 코드는 복잡해집니다. 그리고 그렇게 계속 넘겨주는 기법을 props drilling 이라고 합니다. 이러한 prop 내려주기를 극복하기 위해 등장한 개념이 context입니다. context를 사용하면 명시적인 props 전달 없이도 선언한 하위 컴포넌트 모두에서 자유롭.. 2024. 1. 15. [ React ] useRef const ref = useRef(initialValue) Parameters initialValue ref 객체의 'current' 속성이 초기에 가질 값. 초기 렌더링 이후에는 무시된다. 어떤 유형의 값이든 될 수 있다. Returns returns an objects with a single property: current 처음에는 전달한 'initialValue'로 설정되어 있다. JSX 노드에 ref 속성으로 ref객체를 전달하면 React가 그것의 'current' 속성을 설정한다. 다음 렌더링에서는 'useRef'가 동일한 객체를 반환한다. Usage 1. Referencing a value with a ref by using ref, you ensure that: you can store .. 2024. 1. 14. [ React ] imageURL 을 File instance 로 만들기 보호되어 있는 글 입니다. 2023. 10. 26. [ React ] Rendering Lists (feat. key ) key 란 ？ a string or a number that uniquely identifies it among other items in that array 중요한 이유 This becomes important if your array items can move (e.g. due to sorting), get inserted, or get deleted. A well-chosen key helps React infer what exactly has happened, and make the correct updates to the DOM tree. lets React identify the item throughout its lifetime 리스트 렌더링할 때 key 값 만드는 방법 => 리스트에 직접 .. 2023. 10. 24. 이전 1 2 다음
