FE21 [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. [React Official Document] #1 Quick Start 리액트의 공식문서는 꽤나 잘 구성되어 있다. 오죽하면 '공식문서로 공부해라' 라는 의견이 있을 정도일까. 이 문서는 리액트의 작동 원리에 대해 자세하게 이해할 수 있도록 잘 작성되어있다고 한다. 리액트를 공부하는 학생으로써 공식문서를 읽어보지 않을 수 없다. 당연하게도 영어로 작성되었지만, 굳이 번역기를 쓰지는 않았다. 개발을 공부하는 이상 앞으로 리액트 뿐 아니라 다양한 공식문서들을 읽을 것이다. 출시된지 얼마 지나지 않은 최신 기술, 내가 꼭 써야하지만 사용자가 적어 공식문서 외에는 정보를 얻기 힘든 기술들을 마주할 것이다. 그럴 때 마다 다른것이 아닌 영어가 내 발목을 잡는다면... 분명히 좋은 꼴은 못 볼 것이다. 모르는 단어가 나오거나 한글로 바로 떠올리지 못하는 문장들은 chatGPT를 통해 .. 2023. 9. 25. 이전 1 2 3 4 5 6 다음
