개발하는SM

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

서론 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..

일반적으로 부모 -> 자식으로 props 를 통해 데이터를 전달 할 수 있는데, 자식 -> 부모로 데이터를 전달하는 방법은 없을까? 부모에서 자식 컴포넌트 를 호출할 때 함수를 전달하고, 자식 컴포넌트에서 props 를 통해 전달받은 함수를 호출하면서 파라미터로 데이터를 전달할 수 있다. 이런 개념이 Lifting State Up 개념이고, React 에서 매우 자주 사용되는 구조이다.

React is a Javascript library for building user interfaces - 리액트는 기존 기술들보다 좀 더 간단히 사용자 인터페이스를 구축할 수 있도록 돕는다. - React is all about Component What is Component? - 사용자 인터페이스의 모든 것은 결국 Component 로 만들어져 있다. - HTML, CSS 과 어떤 로직을 위한 Javascript 의 결합 Why Components? - Reusability - Seperation of Concerns How is a component Built? - HTML + CSS + Javascript - Declarative Approach : 항상 목표 상태를 정의하는 것이 중요함. -..