리액트 기초 개념 정리

3.0 Understanding State

1. 리액트는 가상돔을 써서 우리 시야에 보이는 부분만 수정해서 보여주고 모든 업뎃이 끝나면 일괄로 합쳐서 실제 돔에 던져준다. (최소 단위 렌더링)

Vanilla JavaScript와 ReactJS의 노드 변경 처리 과정

1-1. Vanilla JavaScript
Vanilla JavaScript에서는 DOM 변경을 직접 처리합니다. 즉, 필요한 DOM 요소를 직접 선택하고, 요소의 속성을 변경하거나 새로운 요소를 추가하거나 기존 요소를 제거하는 등의 작업을 직접 수행합니다.
DOM 변경이 발생하면, 브라우저는 변경된 DOM 트리를 다시 계산하고, 렌더 트리를 다시 생성한 후 화면에 그립니다. 이 과정은 비용이 많이 드는 연산으로, 자주 발생하게 되면 성능을 저하시킬 수 있습니다.

1-2. ReactJS
ReactJS는 DOM 변경을 처리하기 위해 가상 DOM(Virtual DOM)이라는 개념을 도입합니다. ReactJS에서는 먼저 메모리에 가상 DOM 트리를 생성합니다. 이 트리는 실제 DOM 트리의 사본으로서, 실제 DOM 트리와 별도로 존재합니다.
ReactJS는 상태 변경이 발생할 때마다 새로운 가상 DOM 트리를 생성하고, 이전의 가상 DOM 트리와 비교하여 변경된 부분을 파악합니다. 이렇게 파악된 변경 사항만 실제 DOM에 반영하는 방식을 사용합니다. 이 과정을 '재조정(Reconciliation)' 또는 'Diffing'이라고 부릅니다.
가상 DOM을 사용함으로써, 변경이 필요한 최소한의 요소만 실제 DOM에 반영되기 때문에 불필요한 연산을 줄이고 성능을 향상시킬 수 있습니다.
따라서, ReactJS는 복잡한 UI 업데이트를 효과적으로 처리할 수 있으며, 이를 통해 웹의 응답성을 향상시키고 사용자 경험을 개선할 수 있습니다!

2. 변수를 JSX에 전달하는 방법
   let counter = 0; 변수를 만들고
   Total clicks: {counter} 로 만들어주면
   변수의 카운터 숫자에 따라 변함

3. onClick={countUp}
   -> 이벤트리스너가 countUp 함수를 호출하고 countUp은 카운트를 바꿔줌

3.1 setState

1. 데이터를 저장시켜 자동으로 리렌더링을 하는 방법

   const data = React.useState();
[undefined, f ]

undefined: 초기값, 변수(data ex:counter), f: 그 값을 바꾸는 함수(ex: setCounter)
modifier함수로 state를 변경할 때(=데이터가 바뀔 때 마다) 컴포넌트가 새로운 값을 가지고 리렌더링 된다.
The component is rendered again, this means re-created again, a new const is created with the new value of the 'counter.'

3.5 Inputs and State

1. JSX는 class / for 과 같이 JavaScript에서 선점된 문법 용어 사용 불가,
   class는 className으로 for은 htmlFor로 바꿔쓴다.
2. controlled component: Input 태그는 value, onChange 속성을 붙여서 상태를 관리한다.

4.3 Props

1. Prop 은 component 에 보내지는 argument
2. PropType을 이용해서 보내지는 prop 에 type을 정의할 수 있다. 정의하는 이유는 잘못된 type의 prop 이 보내지는 것을 방지하기 위해서.

5 Create-react-app

1. npx create-react-app react-for-beginners 로 create react app을 만든다.

2. package.json에서 스크립트를 확인할 수 있다.

3. npm start 로 development server를 연다.

4. npm i prop-types 로 prop type을 사용할 수 있다.

6.1 useEffect

1. useEffect

• 두 개의 argument를 가지는 함수
• 첫 번째 argument는 딱 한번만 실행하고 싶은 코드
• 두 번째는 [] 배열을 넣어줌, 디펜던시가 없을 경우 최초 1회 실행, 있을 경우 해당 값이 변할 경우 실행한다. 이 때 디펜던시는 여러개 입력이 가능하다.

  useEffect(() => {
    console.log("i run only once");
  }, []);
  useEffect(() => {
    console.log("i run when 'keyword' changes.");
  }, [keyword]);
  useEffect(() => {
    console.log("i run when 'counter' changes.");
  }, [counter]);

2. react router 설치
   npm i react-router-dom@5.3.0

출처. 노마드코더 리액트 기초강의