리액트의 핵심

• 기존 바닐라 자바스크립트에서는 html을 만들고 자바스크립트에서 html을 끌어와서 control해줬다면 리액트는 자바스크립트에서 html을 만들어서 control을 해준 후 html로 보내준다

• 리액트는 요소를 생성 후 이벤트리스너 컨텐츠 한번에 적용시켜 줄 수 있다는 특징이 자바스크립트와는 다르고 이것이 리액트의 큰 장점이다

• jsx는 자바스크립트를 확장한 문법이다 html과 비슷한 문법으로 리액트 요소를 쉽게 만들 수 있게 해준다

• jsx는 직관적으로 이해하기가 훨씬 쉽다
  브라우저가 jsx로 적은 코드를 이해하게 변환시켜주려면 babel을 설치해줘야한다
  우리가 만들어준 컴포넌트 명들은 반드시 첫 글자를 대문자로 해줘야 한다. 왜냐하면 기존의 태그와 혼동될 수 있기 떄문이다
  그리고 컴포넌트를 컴포넌트 안에 넣기 위해 함수형식으로 만들어줘야 한다.

• 개발자도구를 보면서 웹사이트를 만져보면 리액트로 만들어진 웹사이트는 바뀐요소만 업데이트를 해서 보여주는 반면 바닐라js는 바뀐요소가 속해있는 해당 태그가 업데이트 되는 걸 보여준다.

• React는 이전에 렌더링된 컴포넌트는 어떤 거였는지 확인하고 재렌더링 될 컴포넌트는 어떤지를 보고 바뀐 부분만 표시한다.
  그리고 이것이 인터랙티브한 앱을 만들 수 있는 큰 장점이다. 왜냐하면 바뀐부분만 리랜더링 하기 때문이다.

• 개발자도구를 보면 리액트는 바뀐부분만 업데이트를 해서 보여주는 반면 바닐라js는 바뀐 해당 태그가 업데이트 되는 걸 보여준다
  React는 이전에 렌더링된 컴포는트는 어떤 거였는지 확인하고 재렌더링 될 컴포넌트는 어떤지를 보고 바뀐 부분만 표시하는데 이것이 인터랙티브한 앱을 만들 수 있는 큰 장점임 바뀐부분만 리랜더링 하기 때문이다.

useState

• 리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었다. 리액트 16.8에서 Hooks라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다. useState도 Hooks 중 하나이다.

• React usestate는 초기값을 설정해 줄 수도 있다 (ex. Const data = useState(0)) data의 초깃값은 0이고 이 데이터 변수를 바꿀 수 있는 함수가 저장돼있다.

• modifier함수로 state를 바꾸면 컴포넌트가 재생성되고 코드가 다시 실행된다

• 현재 state를 바탕으로 다음 state를 계산해내고 싶다면

Const [counter, setCounter] = React.useState(0);
Const onClick = () =>{
  // setCounter(counter +1)
setCounter((current) => current +1)
}

• 위의 주석처리한 방법보다 주석처리한 바로 아래의 방법이 더 안전하다고 한다. 예상치 못한 업데이트가 발생하더라도 혼선을 방지해줌으로 더 권장되는 방법이라고 한다.

props

• props는 일종의 방식으로 부모 컴포넌트로부터 자신 컴포넌트에 데이터를 보낼 수 있게 해주는 방법이다. 함수의 파라미터 또는 정의할 때의 인자라고 볼 수 있다
  모든 인자(속성과 속성값)를 오브젝트로 감싼 후 파라미터에 보내준다.

• 커스텀 컴포넌트에 이벤트를 집어넣으면 그건 이벤트로 적용되는 것이 아니라 해당 자식 커스텀 컴포넌트의 프롭으로 전달된다. 다른 모든 것도 마찬가지로 해당되며 컴포넌트 옆에 쓰이는 모든 것은 인자로써 자식 컴포넌트에게 전달되므로 이벤트의 경우 전달한 후 자식 안에서 쓰여야 한다.

• 부모 컴포넌트가 자식 컴포넌트한테 state를 변경하는 함수를 프롭으로 줬을 때 변경이 일어나면 부모 컴포넌트도 재렌더링 된다.

• 만약 부모 컴포넌트가 재랜더링 될 때 프롭으로 state가 들어가 바뀐 컴포넌트만 랜더링 해주고 싶다면 React.memo(컴포넌트 명)을 변수 하나에 저장해주고 그 변수명으로 부모 컴포넌트에 있는 자식 컴포넌트 명으로 바꿔준다. (프롭이 static한 컴포넌트는 랜더링을 해주지 않는다)