December 20, 2021
🧐 React란? React는 페이스북에서 개발한 Javascript 기반의 라이브러리로써 사용자와의 인터렉션을 UI로 쉽게 구현할 수 있도록 만들어 졌습니다. 다운로드 ✨ React의 필요성 사용자 요청에 의한 UI 변화가 거의 없는 정적인 페이지는 React 라이브러리를 사용하지 않고도 개발이 가능합니다. 하지만 웹 애플리케이션이라 불릴 만큼 규모가 …
December 21, 2021
리액트 기반의 프로젝트를 시작할 때 npm으로 create-react-app 패키지를 설치하면 손쉽게 리액트 프로젝트 빌드가 가능합니다. () 하지만 리액트 폴더구조와 빌드 시스템에 대해 자세히 알아보고 싶다면 create-react-app을 사용하지 않고 아래 순서에 따라 직접 리액트를 빌드해보는 것을 추천합니다! 리액트 시작하기 (CRA ❌) 1. 프…
December 22, 2021
🌟 Hook의 등장 배경 리액트 컴포넌트 종류 : Class Component / Functional Component Hook이 등장하기 전 리액트에는 여러 문제들이 있었습니다. Class Component는 Functional Component에 비해 문법이 어렵고 로직의 재사용이 힘든 단점이 있으나 Functional Component로는 할 수 없…
December 23, 2021
✨ useState 정의 상태 관리에 사용되는 Hook이며 상태값을 생성하고 업데이트 시킬 수 있습니다. useState를 호출 하면 state값이 저장되는 '변수'와 state값을 변화시키는 '함수'가 배열로 리턴됩니다. : 상태 값 저장 변수 (현재 상태 값) : 상태 값 갱신 함수 (state를 업데이트하는 setter 함수) 💡 useState…
December 26, 2021
✨ useEffect 정의 첫 렌더링 할 때(mount), 다시 렌더링될 때(update), 화면에서 사라질 때(unmount), 특정한 작업을 수행하고 싶은 경우 사용하는 Hook입니다. 를 사용 할 때에는 첫번째 인자에는 함수, 두번째 인자로는 의존값이 들어있는 배열 Dependency Array(deps)를 넣습니다. 렌더링될 때마다 실행 - De…
January 08, 2022
✨ useRef 정의 Ref는 'reference'의 약자로 '참조'라는 뜻입니다. useRef는 인자로 전달된 값을 에 할당하여 객체로 반환해 주는데, 이때 current에 할당된 값은 렌더링되어도 그대로 유지됩니다. 그래서 렌더링에 상관없이 동일한 참조값이 필요한 경우 useRef를 사용합니다. 또한 current 값이 바뀌어도 컴포넌트가 리렌더링되지…
January 11, 2022
✨ useContext 정의 Context API : 전역적으로 사용되는 state나 데이터를 필요한 컴포넌트에 전달하는 방법 Context를 사용하면 컴포넌트를 재사용하기 어려워 질 수 있다. Prop drilling을 피하기 위한 목적이라면 Component Composition (컴포넌트 합성)을 먼저 고려해볼 것! **Prop drilling : …
January 14, 2022
✨ useMemo 정의 useMemo는 'Memoization' 되어있는 값을 반환시켜주는 hook입니다. Memoization이란 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말합니다. Memoization을 절적히 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션…
January 20, 2022
✨ useCallback 정의 useCallback은 useMemo와 같이 Memoization 기법을 사용하여 컴포넌트 최적화에 사용됩니다. useMemo는 함수에서 반환되는 '값'을 저장한다면 useCallback은 '함수 그 자체'를 저장해두고 재사용하는 것입니다. useCallback 역시 2개의 인자를 필요로 하는데, memoization할 콜백…
January 25, 2022
✨ useReducer 정의 useState처럼 state를 생성 및 관리하는 hook입니다. 여러개의 하위값을 가진 복잡한 state를 다뤄야하거나 배열값에 추가,삭제,수정 등의 동시작업이 필요한 경우 사용합니다. : state 업데이트를 위한 요구 : 요구의 내용 : state를 업데이트하는 역할 (은행) reducer 🔎 useReducer 사…