오늘 공부한 내용

바이브 코딩말고 이제 어떻게 사용되는지 알아야 한다! 리액트 뿌수기 레츠꼬우
현재 리액트의 뼈대인 props, Synthetic Event, state를 찍먹해봄

props (properties)

• props는 properties의 줄임말
• 컴포넌트가 어떻게 보여야 하는지 결정하는 값
• 컴포넌트가 밖에서 안으로 데이터를 전달
• 문자열, 숫자, 객체, 함수, 배열, jsx, 컴포넌트까지 무엇이든 전달 가능!
• UI 재사용성 극대화

Synthetic Event(합성 이벤트)

리액트에서 이벤트 객체를 console.log를 찍어보면 다음과 같은 syntheticBaseEvent라는 낯선 객체가 나타남

• 각자 다른 브라우저마다 이벤트 객체가 다르기 때문에
  REACT가 이를 통합한 표준화된 이벤트 객체 제공
• 그래서 모든 브라우저가 동일하게 이벤트 코드를 작성할 수 있다.

  브라우저와 REACT 이벤트 시스템을 연결해주는 표준화된 이벤트 래퍼이다!

state, useState

React의 핵심은 UI = state의 결과물이라는 사실이다.
그래서 상태가 바뀌면 React는 자동으로 컴포넌트를 리렌더링한다.

const [value, setValue] = useState(0);

useState가 반환하는 값:

1. 현재 상태값(value)
2. 상태를 변경하는 함수(setValue)

이 상태 변경 함수가 호출되는 순간 React는 렌더링을 다시 한다.

<h1>{value}</h1>
<button
  onClick={() => {
    setValue(value + 1);
  }}
>
  +
</button>

버튼을 누를 때마다 value가 변경되고
그에 따라 화면도 자동으로 업데이트된다.

즉, 값이 바뀌어 렌더링되는 것이 아닌 상태 변경 함수(setState)를 호출했기 때문에 렌더링된다