log_J

✅ 왜 사용하는가?Recoil을 사용해 칸반보드를 만드는 프로젝트를 진행중이었다.atom 데이터를 LocalStorage로 저장해브라우저를 닫거나 새로고침을 해도 데이터가 유지될 수 있게 구현하고 싶었다.  1️⃣ 초기 해결방법atom.ts 파일에서 직접 LocalStorage를 연결했다.데이터 수정이 있을 때 마다 LocalStorage에 setItem을 해줬다. const initData = localStorage.getItem('to-do');export const boardState = atom({ key: 'boards', default: [], default: initData ? JSON.parse(initData) : [],});  그런데 Kanban board 특성상 추가, 삭제, 수..

💡 useCallback ? useCallback은 React.memo, useMemo와 같이 memoization과 관련된 최적화 기능에 사용되는 React Hook이다. useMemo와 동일하게 함수형 컴포넌트 안에서만 사용 가능하다. ✅ 언제 컴포넌트의 리렌더링으로 불필요하게 함수가 재생성되는 경우, 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용한다. ✅ 어떻게? const function1 = useCallback(() => {} , [/* 의존성 배열 */] ); 의존성 배열에 변화를 감지할 인자를 전달하면, 배열 내부의 값이 바뀔 때 마다 useCallback의 첫 번째 인자인 콜백 함수를 호출해 memoization된 함수로 리턴한다. ❗ 주의 의존성 배열에 빈 배열을 전달하면 컴포..

💡 Memoization 이미 계산 해 본 연산 결과를 기억해, 재연산하지 않고 필요로 할 때 기억해둔 데이터를 반환하는 것을 말한다. 연산과정을 최적화 시킬 수 있다는 장점이 있다. 오늘 포스팅 할 React.memo와 useMemo는 모두 Memoization과 관련된 함수이다. 두 함수 모두 최적화 기능에 많이 사용된다. ✔ React의 리렌더링 조건 컴포넌트 내부의 state가 변경됐을 때 컴포넌트의 Props가 변경됐을 때 부모 컴포넌트가 리렌더링 됐을 때 리액트의 컴포넌트들은 위 세 가지 조건으로 리렌더링하게 된다. 그러나 세 가지 조건 모두 충족시키기엔 아주 쉬우며, 때때로 리렌더링이 불필요한 컴포넌트까지 실행시킨다. 혹은 너무 잦은 리렌더링으로 오래 걸리는 연산을 계속해서 반복해야하는 경우..

생명주기(생애주기 - Lifecycle) 란? 💡 컴포넌트가 화면에 나타나고, 리렌더가 발생하고, 사라지기까지의 과정 탄생 Mount 컴포넌트가 화면에 나타난다. 변화 Update 컴포넌트 내부의 state가 변경 / 부모가 리렌더 / Props가 변경 등 컴포넌트 자신이 리렌더 되는 상황 리렌더 되는 과정을 업데이트(변화하는 순간)라고 함 죽음 Unmount 컴포넌트가 화면에서 사라진다. 컴포넌트 라이프사이클은 왜 알아야 할까? 컴포넌트가 mount, update, unmount 되는 순간에 어떤 작업을 수행시킬 필요가 있다. 예시) mount - 초기화 update - 해당 변화를 통해 발생할 수 있는 예외 처리 unmount - 컴포넌트가 사용하던 메모리를 반환 React를 사용해서 소프트웨어를 더..

💡 Props란 무엇인가? 부모 컴포넌트로 부터 전달받은 값. 컴포넌트의 속성(Property)를 의미한다. ✅ Props 특징 1. Readonly 상위 컴포넌트로 받은 Props는 컴포넌트에서 수정이 불가능하다. 💡 React는 단방향 데이터 흐름으로 하위 컴포넌트는 데이터를 받을 수 있지만 상위 컴포넌트에 넘길 수 없다. 만약 하위 컴포넌트에서 데이터를 수정해도 상위 컴포넌트는 이를 알 수 없기 때문에 Props는 수정이 불가하다. 2. 객체 타입이다. 컴포넌트는 반드시 1개의 argument를 갖는다. 상위 컴포넌트에서 하위 컴포넌트에 여러 Property를 넣어 전달해도 객체형태의 argument 하나만 받을 수 있다. 3. 구조분해 할당을 사용할 수 있다. Props를 구조분해 할당을 사용하면..

컴포넌트(Component)란? 리액트로 만들어진 앱을 이루는 최소한의 단위 레고 블럭을 조립하여 만들 듯이 앱을 조립하여 만들 수 있는 하나의 블럭을 '컴포넌트'라고 한다. 함수형과 클래스형 차이를 왜 알아야 하나? 클래스 스타일은 리액트의 모든 기능을 다 사용할 수 있지만, Class 라는 문법을 이해해야 하고 복잡하다. 함수형 스타일은 리액트의 제한된 기능만 사용할 수 있지만, 함수를 만들 수만 있다면 작성할 수 있고 단순하다. 💡 함수형 컴포넌트가 지원하지 않았던 기능 - state - life cycle API 📢 리액트 버전 16.8부터 Hook이 등장하면서 state, life cycle API 모두 작성 가능함 작성하기 편리하고 이제 모든 기능을 지원하는 함수형 컴포넌트만 알면되지 왜 클래..

State란? 컴포넌트 안에서 사용되는 자바스크립트 객체 일반적인 객체는 값이 변경된다고 렌더링이 발생하지 않지만, State의 값이 변경되면 렌더링이 발생한다. 즉, 컴포넌트 내에서 지속적으로 변경이 일어나는 값을 관리하기 위해 사용한다. State 사용법 - useState const로 선언한다 변수의 재할당을 막음 반드시 setState로만 state값을 변경할 수 있도록 함. 또한 setState로 값을 변경해야만 렌더링이 발생한다. setState는 카멜케이스로 쓴다 하나의 컴포넌트 내에 state는 여러개 있을 수 있다. 단, state변수명과 setState함수명은 또 다른 state와 선언명이 겹쳐선 안 된다. 💡 setState 사용하기 1. 변경할 값을 직접 넣기 const App = ..

리액트(React.js)란? Facebook(현재 Meta)에서 UI 개발에 초점을 맞춰 만든 프론트엔드, Javascript 라이브러리 복잡하고 동적인 웹 페이지 개발 시 사용이 용이하여 프론트엔드 개발자들이 많이 사용하는 대표적인 라이브러리 리액트(React.js)의 특징 1. Virtual DOM 💡 DOM(Document Object Model) 이란? - 웹페이지 문서(HTML)를 브라우저가 이해할 수 있도록 트리 구조의 노드로 표현한 것. - HTML문서의 계층적 구조와 정보를 표현함. JS 이벤트 처리로 DOM에 잦은 업데이트가 필요한 경우, 브라우저는 수많은 연산을 수행 => 성능 저하 문제 따라서, 메모리에 가상으로 Virtual DOM을 만들어 DOM에 필요한 수많은 연산을 모아 한번에..