React JSX,state,props

JSX

JSX는 React에서 사용하는 JS의 확장문법으로 HTML을 거의 유사하게 JS 내에서 사용할 수 있다. 그래서 컴포넌트를 만드는데 유용하다.

특징으로는

닫는 tag가 무조건 있어야한다.
return하는 값은 무조건 하나의 tag에 담겨야한다.(React.Fragment를 사용하거나 빈태그를 사용해서라고 하나의 tag에 담겨야한다.)
이외에 거의 유사하지만 속성값을 카멜케이스로 적는다.

State

state는 화면에서 동적으로 변화해야하는 값(HTML 코드 포함)에 따라 다르게 보여주는 것을 의미한다.
대표적인 예로 크롬의 다크모드 등이 있다. 클릭하면 다크모드 <-> 화이트모드
이를 사용하기 위해서는 React, useState를 import해야함.

[값이 변하는 변수, 값을 변화시킬 함수명] = useState(초기값)

위와 같은 비구조화 할당을 이용해 선언한다. 또한 state를 사용하는 컴포넌트는 state가 변하면 re-render된다.

Props

이는 컴포넌트에 값(HTML 코드도 가능)을 전달하는 것을 의미한다.(properties의 약어다)
만약 Counter라는 컴포넌트가 있다고 가정했을 때

<Counter initialValue = {10} a = {[1,2,3]} />

다음과 같이 사용할 수 있다. 이는 Counter 컴포넌트에 객체로 전달된다.
만일 여러개일 경우

const CounterProps = {
	a : 10,
  	initialValue: 10
}
...
<Counter {...CounterProps}/>

와 같이 스프레드 연산자와 같이 사용된다.