개발하는SM

서론 아래 코드에서 버튼을 눌렀을 때 에 찍히는 count 값은 왜 2이며 콘솔에 찍히는 count 값은 왜 1일까? setCount(count+1) 을 3번 호출했으니 둘 다 4가 찍혀야 하는거 아닌가? 리액트에서 상태 갱신을 어떤 식으로 진행하며, 컴포넌트 재평가는 언제 일어나는지 알아보자. React State Update Scheduling 리액트는 상태 갱신을 어떻게 할까? useState 훅에서 리턴되는 set 함수를 호출했을 때 즉각적으로 상태값이 변경되지는 않는다. 상태 업데이트를 "스케줄링" 하게 된다. 또한, 함수 호출 시 '리액트에서 관리하는 상태값'을 먼저 변경하며 우리 코드에 있는 상태값을 변경하지는 않는다. 우리 코드에 있는 상태값은 컴포넌트가 재실행되면서 '리액트에서 관리하는 ..

서론 리액트 컴포넌트 내부의 상태값이 변경될 때, 어떤 식으로 리액트가 동작하여 실제 DOM 을 변경해주는 것일까? 리액트 실행 성능을 최적화 할 수 있는 방법은 어떤 것이 있는지 알아보자. 리액트가 동작하는 방식 리액트 컴포넌트에서는 props, state, context 를 이용하여 상태값을 관리할 수 있으며, 상태값이 변경될 때마다 이 변경된 상태값을 포함하고 있는 컴포넌트는 재실행된다. 해당 컴포넌트의 하위에 있는 컴포넌트들도 모두 재실행되며, 이 때 리액트는 단순히 최신 평가의 결과값을 가져와서 직전 평가와 비교한다. 그리고 확인된 모든 차이점을 ReactDOM 에 전달하며, ReactDOM 은 이 변경사항을 실제 브라우저의 DOM 에 적용한다. 그런데 이렇게 상태 값이 바뀔 때마다 모든 하위 ..

서론 자바스크립트는 싱글스레드 방식으로, 한번에 하나의 작업만 처리가 가능하다. 하지만 자바스크립트를 사용해 만들어진 웹사이트들은 버튼 클릭, HTTP 요청 전송 등의 작업을 한번에 처리한다. 싱글 스레드인데 어떻게 여러 작업을 동시에 처리 ( 비동기 처리 ) 를 하는 것일까? 자바스크립트의 동작방식 아래 코드 예시를 보자. 한번에 한 줄 씩 코드를 수행한다고 했을 때, setTimeout 의 두 번째 인자로 0ms 를 넣어주었으므로 바로 콘솔에 2를 찍어주야 할 것 같다. 그런데, 결과값은 1 -> 3 -> 2 가 찍힌다. 왜 그럴까? 자바스크립트 코드를 실행해주는 엔진은 웹 브라우저이다. ( 크롬, 사파리, 익스플로러 등 ) 웹 브라우저에서 자바스크립트가 어떻게 동작하냐면.. 일단 자바스크립트 엔진에..

서론 React Prop 을 사용하다 보면, 불필요한 Props Chain 이 발생하게 된다. 이러한 문제점을 해결하기 위해, Context API 를 활용할 수 있다. Context API 는 Provider 과 Consumer 를 통해 사용할 수 있으며, Consumer 는 useContext Hook 을 통해서도 사용할 수 있다. Context API 와 useContext Hook 을 활용하여 불필요한 Props Chain 을 제거하는 방법에 대해 정리하려고 한다. 불필요한 Props Chain 아래와 같은 간단한 가상의 쇼핑 앱을 예로 들어보겠다. 메인 컴포넌트인 App 이 있고, 하위에 아래와 같은 섹션들이 각각의 컴포넌트로 존재한다. 로그인을 담당하는 Auth 섹션 상품 정보를 보여주는 Sh..

서론 React에서 참조형 타입( 배열, 객체 )의 State를 관리하다 보면, 이전 State의 값을 안전하게 복사해오는 방법에 대해 고민하게 된다. 그 때마다 Javascript 의 Shallow Copy 와 Deep Copy 에 대해 항상 검색하게 되는데, 이런 내용에 대해 확실하게 정리하고 넘어가려고 한다. 원시값과 참조값 원시 값 원시값에는 위와 같이 7가지 종류가 있고, 원시값은 변형할 수 없다. 원시 자료형을 변수에 할당할 때는 변수에 값을 저장한다. ( 값에 의한 전달 ) 기존 변수 ( a ) 를 복사해서 다른 변수 ( copiedA ) 에 할당해 준 다음, 다른 변수 ( copiedA ) 를 변경해도 기존 변수 ( a ) 에는 영향을 주지 않는다. 참조값 원시값이 아닌 것들은 모두 참조형..

1. React Hook 은 React Function 내부에서만 사용한다. - JSX 를 return 하는 React Component Function 혹은 Custom Hooks 에서만 사용한다. 2. React Hook 은 Top Level 에서만 호출한다. - React Hook 을 nested 하게 사용할 수 없다. - React Hook 을 그 어떤 block statement 내부에서라도 사용할 수 없다. 예시) 아래와 같은 형태는 불가함 if(true){useEffect(()=>{})} 3. useEffect 훅 사용 시, useEffect 훅 내부에서 참조하는 모든 변수는 deps 배열에 추가한다.

useState() 는 대표적인 state 관리 Hook 으로, 개별 state 및 데이터들을 다루기에 적합함. state update 가 쉽고 몇 가지로 제한되어 있는 경우, 즉 state 가 변경되는 경우가 다양하지 않은 경우 적합함. 하지만, 객체 형태의 state 또는 복잡한 state 가 있다면 useReducer 를 고려할 수 있음. 복잡한 형태의 State 를 다루기에 useReducer 가 더 Powerful 한 기능을 제공하기 때문임 ( 이전 state 를 가져오거나, dispatch 함수를 호출할 수 있는 기능 등 ) 참조 : https://www.udemy.com/course/best-react/

useEffect 는 useState 외에 가장 중요한 리액트 훅이다. 따라서 반드시 확실하게 이해하고 넘어가야 한다. 아래와 같이 dependencies 배열 없이 첫번째 인자로 함수만 넘겨줬을 경우, 컴포넌트가 다시 실행될 때마다 해당 함수가 수행된다. 아래 useEffect() 는 모든 컴포넌트 렌더링 주기 이후에 실행되기 때문이다. ( + 컴포넌트가 처음 마운트 된 때 포함 ) 그렇다면, 두번째 인자로 빈 배열 Dependencies 를 넘겨줬을 경우는? 해당 Login 컴포넌트가 처음으로 마운트되고 렌더링 될 때만 실행된다. 두번째 인자로 특정 값을 넘겨줬을 경우는? 해당 State 가 변경될 때마다 "EFFECT RUNNING" 로그가 찍힌다. 아래 예시에서는 Password Key Strok..