[React] 리액트/React state 문법 (1)

시작 전에 먼저 왜 state를 쓰는지 알고 가자

굳이 state에 자료를 넣지 않고 변수에다가 자료를 넣어줘서 띄워줄 수도 있는데 굳이 state를 쓰는 이유는

밑에 잠깐 보이는 사진에 let post = '강남 가락국수 맛집';이라고 저장해 놨는데

이게 하드코딩으로 해놓은 게 아니라 어디서 정보를 가져오는 거라고 생각해 보자 

어느 날 정보가 바뀌어서  강남 가락국수 맛집에서 역삼 우동 맛집으로 바뀌면 

let post = '역삼 우동 맛집'; 이런 식으로 바뀐다고 생각하면 되는데 여기서 바뀐 값이 자동으로 html에 적용되지 않는다

 

하지만 state를 쓰면 state를 쓰고 있던 html은 자동으로 재렌더링이 된다 그래서 자주 바뀌는 정보 같은 경우는 

변수에 저장하는 것이 아니라 state에 저장해서 이용해 주는 게 더 좋다

 

 

 

 

본론으로 가자

 

 

 

 

앞서 얘기했듯 리액트에서 자료를 저장할 때 변수에다가 담아 놓을 수도 있는데

state라는 것도 사용한다.

 

먼저 useState를 입력하면 위에 자동으로 Import 되는 걸 볼 수 있는데

만약 안되면 그냥 직접 입력하면 된다.

 

그 후 

 

 

useState(보관할 자료) 이런 식으로 state에 넣고 싶은 자료를 () 안에 집어넣고

앞에 let [이름, 이름]을 해주면 완성된다

사진에 보이는 a의 의미는 state에 보관한 자료가 나오게 되는 이름이라고 생각하면 된다.

 

이게 무슨 뜻이냐면 

 

현재 첫 번째 글제목은 하드 코딩으로 해놓은 상태인데 내가 여기서 state에 저장해 놓은 정보를 띄우고 싶으면

글제목에 { a }를 입력해 주면 된다는 뜻이다.

 

 

이런 식으로 바꿔주면 잘 변경된 걸 확인할 수 있다.

 

b의 의미는 다음 글에서 알아보자