본문 바로가기

FE/React14

[React Official Document] #6 Updating object on state 리액트의 상태로는 다양한 타입이 할당될 수 있다. 우리는 숫자, 문자열, 불리언 등의 값들을 사용했는데, 객체 또한 상태가 될 수 있다. 하지만, 우리는 불변성을 유지하기 위해 객체를 바꿔서는 안된다. 객체를 바꾸는 것 대신, 새로운 객체를 만들어서 기존 객체와 교체해야한다. 내부의 값을 바꾸는게 아니라, 객체 자체를 교체한다는 뜻이다. 이 문서에서는 객체인 상태를 업데이트, 중첩된 객체 업데이트, 불변성, Immer를 활용하여 간단하게 객체 상태를 업데이트 하는 방법을 배울 것이다. Mutation(변경)이란? 숫자, 문자열, 불리언, 객체 등 모든 자바스크립트 타입은 객체가 될 수 있다. 여기서 숫자, 문자열, 불리언 등은 불변적인 값인데, 변할 수 없고 read-only인 것으로 받아들여도 된다. .. 2023. 10. 4.
[React Official Document] #4 State as a snapshot 우리는 useState를 사용하여 컴포넌트의 상태를 관리한다. 컴포넌트의 상태가 바뀌면 그 컴포넌트는 리렌더링된다. 문서는 이 과정에 대해 설명하고 있다. 상태에 따른 리렌더링의 원리와 과정, 그리고 앞으로 배울 것에 대해 자연스럽게 이해할 수 있다. https://react.dev/learn/state-as-a-snapshot State as a Snapshot – ReactThe library for web and native user interfacesreact.devsetState()는 렌더링을 일으킨다setState()는 상태를 나타내는 변수를 바꾼다고 생각할 수 있다. 하지만 틀렸다. setState()는 리렌더링을 일으키는 것이다. 페이지 내의 이벤트(버튼 클릭 등)를 제어하기 위해서는 상태.. 2023. 9. 28.
[React Official Document] #3 Render and Commit 본 문서에서는 리액트의 렌더링 과정에 대해 설명하고 있다. 리액트에서 레더링이 무엇을 의미하는지, 컴포넌트가 렌더링되는 시기와 이유, 컴포넌트가 화면에 보여지는 과정, 왜 렌더링이 항상 DOM 업데이트를 일으키는 것은 아닌지에 대해 알 수 있다. 렌더링 과정은 크게 세 단계로 진행된다. 렌더링을 일으키기 (Trigger a render) 컴포넌트 렌더링하기 DOM에 커밋하기 컴포넌트를 음식, 리액트를 종업원이라 비유해보자. 종업원(리액트)은 주문(request)을 받으면 주방에 전달해주고, 음식이 나오면 전달해준다. 렌더링 과정은 다음과 같이 비유될 수 있다. 렌더링 일으키기: 손님의 주문을 주방에 전달하기 컴포넌트 렌더링하기: 주방에서 음식 준비하기 DOM에 커밋하기: 손님에게 음식 전달하기 https.. 2023. 9. 27.
[React Official Document] #2 Thinking in React 본 문서에서는 어떻게 리액트 앱을 설계하는지에 대해 설명하고 있다. 상태 관리와 상태에 따른 컴포넌트 분리에 대해 잘 알 수 있다. 예제 코드가 주어지지만 이 포스팅에서는 생략할 것이다. 아래의 링크를 통해 방문하여 직접 읽어보는 것을 권장한다. https://react.dev/learn/thinking-in-react Thinking in React – React The library for web and native user interfaces react.dev 백엔드 개발자로부터 JSON API, 디자이너로부터 (피그마같은)목업 디자인이 주어질 것이다. 우리는 이 정보들을 기반으로 웹 사이트를 개발해야한다. 총 5개의 단계로 구분하여 설명할 수 있다. 1. UI를 컴포넌트들로 나누기 프로그래밍: S.. 2023. 9. 26.