TIL

리액트 나에게 너무 먼 당신...

React

User Interface(웹 UI)를 만들 수 있게 도와주는 라이브러리
사용자에게 UI를 보여주고 이벤트를 처리하는 작업을 수행합니다.

✨ 1. React는 Component로 이루어진 UI 라이브러리입니다.
Component란 한 가지의 기능을 수행하는 UI 단위입니다.
ex. button, Navbar, article ...

• 독립적
• 재사용성

React를 이용해서 Web Application을 만든다
= Component들을 만든다

웹 사이트를 컴포넌트 단위로 바라보는 시각을 가지는 연습하기!

✨ 2. React는 데이터가 변경될 때마다 Application 전체를 재렌더링합니다.

Create React App

공통적으로 설정해서 사용하는 프로젝트 환경을 손쉽게 한번에 바로 설치해서 사용할 수 있도록 하는 스크립트

state

state를 업데이트할 때는 꼭❗ React에서 제공하는 setState 함수를 호출해야 합니다.
React에서는 state를 직접 수정하면 안됩니다.
부분적으로 업데이트가 불가하므로 전체적인 state를 업데이트해야 합니다.
그제서야 React는 state가 변경했음을 파악하고 render 함수를 다시 실행하게 되는 것입니다.

state = {
  count: 0,
};

handleIncrement = () => {
  // state 오브젝트 안에 있는 count를 증가한 뒤 state를 업데이트함
  this.setState({
    count: this.state.count + 1
  });

spread syntax

배열 안에 있는 아이템들을 하나하나씩 새로운 배열 안으로 복사할 때 사용하는 문법입니다.

state = {
    habits: [
      { id: 1, name: 'Reading', count: 0 },
      { id: 2, name: 'Running', count: 0 },
      { id: 3, name: 'Coding', count: 0 },
    ],
  };

  handleIncrement = (habit) => {
    console.log(`handleIncrement ${habit}`);
    const habits = [...this.state.habits];
  };

---

const array2 = array; // x567(array 배열 오브젝트 참조값)
const array3 = [...array]; // x999(새로운 배열 오브젝트 참조값)

array2는 단순히 array 변수를 할당하므로 array에 들어있던 참조값인 x567이 그대로 할당됩니다.

array3은 단순히 참조값을 가지고 온 것이 아니라,
spread operator를 이용해서 array에 있는 모든 아이템들을 새로운 배열을 가지고 와서 새로운 배열을 만들게 되는 것입니다.
array2처럼 array를 가리키는 것이 아니라 새로운 배열 오브젝트를 가리키게 됩니다.

➕ 추가 이해😱

React에서는 UI상에 표시되어야 하는 데이터라면 무.조.건. 리액트에서 제공하는 State를 이용해야 합니다.

그냥 일반 멤버 변수로는 원하시는 기능을 구현할 수 없습니다.
render도 정확하게 호출되지 않고, componentDidUpdate도 호출되지 않습니다.