JSX

JSX는 자바스크립트를 확장한 문법으로 HTML문법과 흡사한 문법을 사용하기 때문에 UI 작업시 보다 시각적으로 편리하게 작업을 할 수 있다.

babel이란 자바스크립트 컴파일러로 babel을 이용하면 ES6 이상의 최신 문법을 ES5 이하의 예전 문법 형태로 변경할 수 있다. 이를 통해 최신 문법들이 적용되지 않은 브라우저에서도 정상적으로 작동할 수 있게 만들어준다.

• 컴포넌트 첫글자는 대문자로 표기해야 한다.
• class는 className으로 표기해야 한다.
• for은 htmlFor로 표기해야 한다.

  funtion(){
      retutn()
  }

는 다음과 같다.

() => ()

[!] 함수는 다시 한 번 정리하기로...

state

React는 똑똑해서 리렌더링시 바뀐 부부만 업데이트한다.
동일한 HTML, UI를 다시 만들지 않는다.

useState란?

	const [값, 함수이름] = React.useState(값);

🤔

🙂

array 이름 지정하기

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

🤔

	const color = ['blue','green','white'];
	const blue = color[0];
	const green = color[1];
	const white = color[2];

🙂

	const color = ['blue','green','white'];
	const [blue, green, white] = color;

컴포넌트를 활용한 단위 변환기 만들기!

Props

아규먼트 처럼 부모 컴포넌트로 부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법이다.

button style 동일한 컴포넌트 만들기!

🤔

🙂

Memo

React.memo()를 사용하면 prop의 변경이 일어난 부분만 리렌더링 시킬 수 있다.

ES6

import
ixport
module

useEffect

코드의 실행 시점을 관리할 수 있는 선택권을 얻는 방어막 같은 존재, 디펜던시가 없을 경우 최초 1회 실행, 있을 경우 해당 값이 변할 경우 실행한다. 이 때 디펜던시는 여러개 입력이 가능하다.