React - state, component

state

• 데이터는 변수 또는 state에 넣어야 한다.
• state를 사용하는 이유 : web이 app처럼 동작하게 하려면 state에 데이터를 저장해놔야 함. > state가 변경되면 HTML이 자동으로 재렌더링이 되기 때문.
• 일반 변수는 변경되어도 재렌더링이 안됨.
• 자주 바뀌는, 중요한 데이터는 변수 말고 state로 저장해야 함.
• useState는 항상 2개인 배열이 생성되고, 구조분해할당을 적용하여 test라는 변수에 값을 저장하는 방식
• state 내에는 문자, 숫자, 배열, 객체 모두 저장 가능.

import React, {useState} from 'react';
function App() {
  let [test, fixText] = useState('테스트');
  let [test2, fixText2] = useState('테스트');

  return <div>{test}</div>;
}
// output: '테스트'

과거의 state를 이용한 현재 state 수정

• 배열에 값을 추가할 때 사용하는 arr.push를 하면 참조의 대상이 같아서 render는 바뀐 값을 인식하지 못한다.
• spread operater를 이용하여 배열을 얕은 복사해주면서 참조의 대상이 달라지게 만들고 값을 추가해준다.
• prevState는 과거의 값을 이용하여 현재의 값을 바꿔줄 때 사용.

class Exer extends Component {
  state = {
    name: [],
  };
  pushArray = () => {
    this.setState((prevState) => {
      return {
        name: [...prevState.name, 1],
      };
    });
  };
  render() {
    return;
    pushArray();
  }
}```

## Component
- Component? HTML을 한 단어로 줄여서 쓸 수 있는 방법
- Component를 생성할 때는 대문자로 시작하기
- return () 내부를 묶을 때 의미없는 <div> 안 쓰려면 <> </> 빈태그 감싸주기(fragment)
- 컴포넌트 안에 컴포넌트를 만들어둘 수 있어 관리가 편해짐.
- 자주 변경되거나 반복적으로 출현하는 HTML덩어리를 Component로 만들면 좋음
- 다른 페이지를 만들 때도 컴포넌트로 재구성하는 방식
- 다른 component에서 만든 state를 쓰려면 props(properties)를 이용해서 데이터를 전달해줘야 함