TIL - 36

React의 규칙

1. 태그는 꼭 닫혀있어야 합니다.
2. 두개 이상의 태그는 무조건 하나의 태그로 감싸져있어야 합니다. (*div로 감싸기 애매할땐 Fragment 로 감싸라! )

function App() {
  return (
    <>
      <Hello />
      <div>안녕히계세요</div>
    </>
  );
}

3. Javascript의 변수는 {}로 감싸라

function App() {
  const name = 'react';
  return (
    <>
      <Hello />
      <div>{name}</div>
    </>
  );
}

4. Class -> className 바꿔서 써라
5. JSX에 style를 쓸때는 변수로 입력하고 camelCase에 맞춰서 써라

Props

defaultProps 로 기본값 설정
컴포넌트 태그 사이에 넣은 값을 조회하고 싶을 땐, props.children 을 조회하면 됩니다.

useState : 컴포넌트에서 동적인 값을 상태(state)라고 부릅니다

• 왜 사용해?
  - 함수형 컴포넌트에서도 상태를 관리할 수 있기 위해서

import React, { useState } from 'react';

function Counter() {
  const [number, setNumber] = useState(0);

  const onIncrease = () => {
    setNumber(prevNumber => prevNumber + 1);
  }

  const onDecrease = () => {
    setNumber(prevNumber => prevNumber - 1);
  }

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

• useState(parameter)의 값이 number이다.
• SetNumber 은 바뀌는 값
• prevNumber 지정이유?
  - 함수형 업데이트는 주로 나중에 컴포넌트를 최적화를 하게 될 때 사용하기 위해

여러개의 input으로 useState 쓸때

• useState의 parameter이 객체 상태로 태그될때는 새로운 변수를 만들어 줘야한다 (o/x)
  - O: 왜냐하면, immutable한 상태를 지켜줘야하기 때문에(*component의 업데이트성능을 최적화 하기 위해서 ) rest문법을 사용해서 또 다른 변수를 만들어주고 사용해야한다.