[TIL]React JSX

오늘 공부한것 & 기억하고 싶은 내용

JSX

• Javascript에 XML을 추가하여 확장한 문법이다.
• JSX는 React element를 생성한다. (React element는 DOM element와 달리 일반 객체이다)
• 단독 태그일경우에도 태그를 닫아줘야한다.(<img/>, <input/>)
• 렌더링 될 RootElement는 하나만 존재해야한다.
• JS표현식을 사용하기 위해 중괄호를 사용한다.{} ({} 내부에 따옴표 사용하지 않는다.)
• camelCase로 작성된 속성명 사용해야한다.(className, tabIndex)

setState

• 컴포넌트의 state 객체에 대한 업데이트를 실행한다.
• state가 변경되면 컴포넌트는 리렌더링 된다.(직접 state를 수정하면 render 함수를 호출하지 않아 렌더링이 일어나지 않기에 setState를 호출해서 리렌더링 한다.)
• 비동기로 작동한다.

function App() {
  const [state, setState] = useState(0);

  const onClick = () => {
    setState(state + 1);
    console.log(state);
    //setState((cur) => cur + 1) 위의것보다 더 안전한 계산값
  };

  return (
    <div className="App">
     <h1>Total {state}</h1>
     <button onClick={onClick}>Click</button>
    </div>
  );
}

onClick안의 console.log(state)는 이전 state값을 출력한다.
(리렌더링 된 state값과 다른경우는 setState가 비동기이기 때문이다.)
변경되는 state가 많을 경우 리렌더링이 반복되고 속도도 저하되기에 변경된 값을들 모아 한번에 업데이트를 진행하기 위해 배치 기능을 사용해 비동기로 작동한다.

배운점 & 느낀점

한번 들었던 강의를 전체적으로 다시 들으면서 복습하니까 좋은거 같다
setState의 경우에 예전엔 따라하기 급급해 이론까지 완벽히 기억하지는 못했는데 다시 천천히 강의를 들어보면서 비동기적으로 작동한다는 개념을 확실히 익혔다.