[React 기본] 6. state

 

 

 

 

개인 공부 후 자료를 남겨놓기 위한 목적이므로,
생략되거나 오류가 있을 수 있음을 알립니다.
설명에 대한 지적은 언제나 환영입니다. :)

 

 

이 포스팅은 이전의 포스팅과 이어집니다.

2022.07.07 - [Develop/react] - [React 기본] 5. event

[React 기본] 5. event

 

 

+ 생활코딩의 react 강의를 기본 베이스로 이것저것 추가 작성 필기입니다.

영상을 보고싶다면 다음의 링크를 접속해 보시는 것을 추천합니다.!

https://opentutorials.org/course/4900

React - 생활코딩

 

 

---

State

 

state의 기능을 표현한 도식

 

state 내용에 들어가기에 앞서

 

props와  state의 차이점에 대해 간단하게 짚고 넘어가도록 하자.

 

---

State를 이용하여 컴포넌트 만들어보기

여태까지 우리가 배워왔던, 여러 문법들을 이용하여 App을 다음과 같이 코드를 작성해보았다.

 

 

막 보았을 때는 이것저것 많이 추가된 것처럼 보이지만, 정작 자세히 보면 큰 차이가 없다.

 

mode 변수는 기본적으로 "WELCOME" 값을 가지고 있으며, 해당 값이 READ로 바뀔 경우 Article 컴포넌트에 들어갈 내용이 바뀌는 코드이다.

 

 

 

---

 

이제 이벤트가 발생했을 때, mode의 값을 바꿔보도록 하자.

 

미리 작성한 코드를 활용하여 간단하게 Header와 Nav를 클릭했을 때, mode가 변경될 수 있도록 다음과 같이 

코드를 수정했다.

 

 

코드를 보았을 땐, Header와 Nav를 클릭함에 따라 mode가 바뀌어 content의 값이 바뀌어야 할 것 같지만,

 

실제로  App은 다시 실행되지 않기 때문에 return 값이 바뀌지 않아, 우리가 원하는 것처럼 content가 바뀌지 않는다.

 

우리는 mode가 바뀜에 따라서 실시간으로 content가 바뀌기를 바라는데,

 

 

이때 사용하는 것이 바로 state이다.

 

state로 지정한 값은 변화가 생김에 따라 즉각적으로 재랜더링 되어 브라우저에서 확인할 수 있게된다.

 

 

---

state를 사용하기 위해서는 usestate라는 hook을 사용해야 한다.

 

hook을 사용하는 방법은 간단하다. 해당 코드의 맨위에 다음의 코드를 추가해주면 끝난다.

 

react의 useState를 추가해주었다.

 

 

이제 다시 App으로 돌아와서.

 

다음의 mode는 일반적인 지역변수이다.

 

지역변수 mode

 

이 지역변수 mode를 state로 변환시켜보자. 변환시키는 방법은 간단히 usestate로 감싸주면 된다.

 

이후 usestate가 어떻게 작동하는지 알아보기 위해 console.log를 찍어보도록 하자.

 

state 만들기

 

다음과 같이 콘솔이 찍히는 것을 확인할 수 있다.

 

 

useState는 기본적으로 배열을 리턴하는 것을 확인할 수 있고,

 

배열의 0번 인덱스는 값을 리턴.

 

1번 인덱스는 함수를 리턴하는 것을 볼 수 있다.

 

각각의 의미는 다음과 같다.

 

0번 인덱스 : 상태의 값을 읽을 때 쓰는 데이터
1번 인덱스 : 상태의 값을 변경할 때 쓰는 함수.

 

따라서 다음과 같이 표현할 수 있다.

 

 

이를 단순하게 축약하면 다음과 같은 코드가 된다.

 

 

이것이 state의 가장 대표적인 형태이며 우리가 가장 많이 사용하게될 형식이다.

 

 

---

1번 인덱스가 상태의 값을 변경하는 함수라고 했으므로, 

 

이를 이용하여 mode의 값을 변경하는 코드를 다시 한번 짜보도록 하자.

 

 

state를 이용하여 즉각적으로 데이터가 반영되어 재랜더링 되는 것을 확인할 수 있다.

 

 

 

---

이제 state의 테크닉을 알았으니 이것을 이용하여

 

해당 목록을 클릭하면 props로 들어있는 데이터를 출력하도록 코드를 작성해보자.

 

 

작동을 시켜보면

 

이게 왠걸? 작동이 안되는 걸 확인할 수 있다. 이 때 디버깅을 위해 for문에 console.log를 찍어보자

 

콘솔창을 확인해보면 topics[i] 와 id 의 데이터 형식이 다른 것을 확인할 수 있다.

 

 

 

데이터 형식이 다르기 때문에, 다른 값이라고 판단하여 출력이 되지 않았던 것이므로

 

문자열로 표현된 숫자를 처음 넣었던 곳으로 가서 데이터 형식을 숫자로 바꾸어주면 제대로 작동한다.

 

숫자 데이터로 변경하여 넣어준다.

 

다음은 완성된 모습이다.