JSX 문법중 state사용하기

이제는 변수로 값을 정의하는것이 아닌 state로 값을 정하는 방법을 보여드리도록 하겠습니다.

 

React에 있는 내장함수중 state를 사용하겠다는 뜻입니다. 즉 리엑트의 데이터 저장공간 state를 만드는 방법입니다.

 

 

ES6 destructuring 문법으로 array,object에 있던 자료를 변수에 쉽게 담고싶을때 사용하는 방법을 가르쳐주도록 하겠습니다.

var [a,b] = [10,100]

이렇게 선언한다면 a=10, b=100인 상태가 됩니다.

 

다음과 같이 선언하면 title = '코트 추천' 이라는 값이 성립이 됩니다.

그래서 h3안에 title을 넣었으므로 출력값은 '코트 추천'이라고 나오게 될겁니다.

두번째 변수인 titleChange는 앞으로 바뀌는 데이터값을 받아오는 용으로 쓰겠습니다.

 

 

출력값

배열로 이용한 useState

그럼 2번째 인덱스인 치마추천이 나오게 됩니다.

출력값

다음과 같이 배열로 이용해서 원하는 값을 인덱스 단위로 출력하는것도 가능하게 됩니다.

 

 

 

즉, state는 

1. 변수 대신 쓰는 데이터 저장공간이라고 할 수 있습니다.

2. useState()를 이용해 만들어야 합니다.

3. 문자, 숫자, array, object 다 저장가능합니다.

4. state에 데이터를 저장하는 이유는 웹이 App처럼 동작하게 만들고 싶어서 이기 때문입니다.

5. state가 변경되면 html이 자동으로 재렌더링을 합니다. (새로고침 없이도 html이 스무스하게 변경됩니다.)

6. 자주바뀌고, 중요한 데이터는 변수말고 state로 저장해서 써야합니다.