나는 오늘도 멋있다

1. 모든 행동에는 목표를 정하고 근거가 있어야 한다. 2. 문제가 발생하면 해결이 아닌 원인을 찾아야 한다. 3. 다른사람의 관점을 고려해야한다. 학습목적 상태관리와 함께 자주들었던 Context API를 들었을때는 전역상태관리 할때 쓰이는것 아닌가? 라는 생각만을 가지고 있었다. 보통 "가벼운 프로젝트에서 사용하기좋다", "좀더 큰프로젝트에서는 다른 상태관리 라이브러리" 라는 글들을 보았다. 왜그럴까? 사용법을 알아아보고 그에 대한 이유를 알아보자. 모든내용은 내가 추측한 것이아닌 공식문서의 내용을 토대로 하며, 요약 타이틀에만 나의 의견을 반영한다. Context API란? Context API는 React에서 제공하는 기능으로, 컴포넌트 간에 Props를 통해 명시적으로 정보를 전달하지 않고도 하..

1. 모든 행동에는 목표를 정하고 근거가 있어야 한다. 2. 문제가 발생하면 해결이 아닌 원인을 찾아야 한다. 3. 다른사람의 관점을 고려해야한다. 학습목적 React의 hook은 각목적에 맞게 쓰이고 자주 사용되는 hook들이 있다 useState는 상태변경, useEffect는 side Effect 등 말이다. 그중 useReducer은 명칭은 익숙하지만 사용해본적이 없다. Redux에서도 reducer함수에 따라 상태를 업데이트 하는데, Redux와 관계가 있는건가? 하는 궁금증으로 학습을하게 되었다. useReducer란? 여러 상태 업데이트가 많은 구성요소는 상태관리를 하기가 힘들수도 있다. 이런 복잡한 구성 요소의 상태를 하나의 함수로 관리하여, 단일 컴포넌트 내의 복잡한 상태들을 구조화하여 ..

React.memo란? 부모로 부터 전달받은 Props의 상태변경이 일어나지 않았을때 불필요한 렌더링을 방지하는 API 오직 Props 변화에만 의존하는 최적화 방법 React.memo 왜 사용해야할까? React의 함수형 컴포넌트에서 상태가 변했을경우 컴포넌트는 리렌더링이 발생한다. 문제는 자식의 상태는 변경되는것이 없는 상황에서 부모컴포넌트의 상태가 변경됨으로써 자식은 불필요한 렌더링이 발생한다. 그렇기에 해당 자식이 부모에게 받는 props의 상태가 동일하다면 자식을 렌더링 하지 않도록 할수 있다. React.memo 구문 const ComponentName = memo(Component) Component: 부모에게 Props를 받는 컴포넌트 React.memo 동작방식 부모에게 받는 Props가..

useCallback이란? React에서 성능 최적화를 위해 사용되는 hook중 하나로, 함수자체를 메모제이션(memoization)하여 불필요한 함수 재생성을 방지하여 렌더링성능(불필요한 렌더링 방지)을 향상시킨다 useCallback 왜 사용해야할까? React의 함수형 컴포넌트는 해당 컴포넌트가 렌더링될 때마다 모든 내부 변수 및 함수가 초기화되기 때문에 함수또한 재생성을 하게된다. 여기서 함수는 참조타입을 가지므로 렌더링마다 다른 참조 주소를 가지게 되는데, 이러한 이유로 재생성 되는것을 useCallback을 통하여 최초 렌더링시에 참조주소를 유지를 하고, 이전함수를 사용하는 것 이다. useCallback 구문 useCallback(memooizationFunctuin,[dependencies..

useMemo란? React에서 성능 최적화를 위해 사용되는 hook중 하나로, 이전에 계산된 함수호출 결과값을 메모제이션(memoization) 하여 불필요한 계산을 방지하여 렌더링성능(불필요한 렌더링 방지)을 향상시킨다 메모제이션(memooization): 이전에 계산된 값을 캐싱하여 동일한 입력에 대해 다시 계산을 수행하지않고 저장된 값을 반환 useMemo 왜 사용해야 할까? React의 함수형 컴포넌트는 해당 컴포넌트가 렌더링될 때마다 모든 내부 변수 및 함수가 초기화되기 때문에, 컴포넌트 내부에서 무거운 작업을 하여 값을 반환하는 함수가 있을때, 자주 변경되지않는 값이 렌더링마다 해당 함수를 호출하여 값을 반환하는것은 무의미한 반복 작업이다. useMemo는 이전에 계산된 결과값을 메모리에서꺼..

useRef란? 렌더링시 변하지 않는 값을 사용할수 있게 해주는 hook이다. 일반적으로는 DOM요소를 보유하는데 사용된다. useRef 왜 사용해야 할까? React의 함수형 컴포넌트에서 렌더링과는 상관없이 독립적으로 값을 저장하고 유지할수 있게 해주는 Hook이다. 일반적으로 DOM요소에 대한 참조를 유지하는데 사용되지만, 권장되지 않지만 렌더링에 영향을 주지않고도 데이터를 저장하고 업데이트할 수 있는 장점이 있다. useRef 구문 const ref = useRef(initValue) initValue: ref객체의 current프로퍼티에 초기에 지정되는 값이다. 모든유형의 값이 될수 있으며, 초기렌더링 후에는 무시된다. useRef는 단일 프로퍼티를(current) 가진 객체를 반환한다. DOM에..

useEffect란? React의 함수형 컴포넌트에서 부수효과(side effects)를 다루기 위한 hook이다 부수효과(side effects): 컴포넌트의 렌더링과는 직접적으로 관련이 없는작업(네트워크 요청,DOM 조작 등) useEffect 왜 사용해야 할까? React의 함수형 컴포넌트에서는 일부 구성요소가 외부 시스템과의 동기화가 필요할 수 있다. 예를들자면 네트워크요청, DOM조작, 구독설정, 타이머 설정들등 컴포넌트의 렌더링과 직접적인 관련이 없는 경우에 사용한다. useEffect 구문 useEffect(callback,[dependencies]) callback: 부수효과를 수행하는 함수로, 컴포넌트 렌더링 후에 비동기적으로 실행된다. 필요에 따라 Clean-up함수를 반환할 수 있다...

useState란? 기존의 클래스 컴포넌트보다 간결하고 명확한 문법을 가지는 함수형 컴포넌트에서 상태변수를 추가할수 있게 해주는 hook이다. 상태변수: 프로그램이나 애플리케이션의 현재 상태를 나타내는 변수다. React에서의 상태변수는 주로 컴포넌트의 상태를 나타낸다. useState 왜 사용해야 할까? React의 함수형 컴포넌트에서 useState는 핵심 hook이라고 볼수 있다. 왜 핵심일까? 상호 작용의 결과로 화면의 내용을 변경해야 하는 경우가 많다. 즉 여러가지 상태변수를 간단하게 정의하고 업데이트하는데 사용된다. useState 구문 const [state, setState] = useState(initValue) initValue: 컴포넌트가 처음 마운트될때 사용되는 초기값 state: ..