state와 prop을 공부하고 이제 좀 적응이 되었나 싶었는데 역시 아직 적응이 되지 않았음을 알았다.
useState 에 대해서 정리를 해보자면
state는 변할 수 있는 값으로 변화에 대한 상태를 중요시 하는 데이터이다.
state는 유저가 체크박스를 선택했는지, 어떤 옵션을 선택했는지,
어떤 메세지를 입력하고 클릭을 했는지 등 다양한 상태를 파악하여 활용하는 데이터다.
만들 때 이용자가 선택할 수 있는 다양한 경우의 수를 만들어 놓아도 이용하는 사람의 선택은
만들 때는 알 수 없는 것 처럼 이용하는 사람의 선택에 따른 상호작용에 많이 활용할 수 있는 데이터다.
이 state는 워내 함수 컴포넌트가 아닌 클래스 컴포넌트에서 사용해서 setState라는 함수로
사용했었다고 알고 있다. 하지만 지금은 Hook이 업데이트 되면서 state를 클래스 컴포넌트가 아닌
함수 컴포넌트에서도 사용할 수 있게 되었다.
그 사용가능하게 하는 함수가 useState다.
useState는 기본적으로 변화를 전달해주는 함수다.
함수의 선언은 보통 이런식으로 사용한다.
import React, { useState } from 'react';
const [ 변화가 담길 변수, 변화를 받는 함수 ] = useState(초기 값);이렇게 우선 react로 부터 import 하고 사용해야 한다. useState는 정말 다양한 곳에서 활용이 가능하다.
체크 박스를 눌렀을때, 텍스트 창에 입력을 했을때, 옵션을 선택했을 때, 클릭을 했을 때 등
다양한 이벤트로 인한 변화 값이 변화가 담길 변수에 실시간으로 값이 전달되어 사용할 수 있다.
현재 상태와 다른 부분이 있는지 체크 해서 있다면 랜더링 한다.
그래서 중요한 것은 어떤 이벤트에 어떤 상태의 값을 이용해 결과를 만들 것인지에 있다.
오늘 삽질 했던 부분은 달라진 부분을 어떻게 감지하게 하는가 였다.
오늘의 삽질의 원인은 useState는 상태의 변화를 어떨 때 인식하는가 였다.
고민했던 문제는 주어진 객체가 들어있는 배열 데이터를 가지고 그 사전 데이터로 만든 메세지가
웹페이지에 나오는것이 첫번째
입력창을 만들고 입력하는 내용을 새로운 메세지로 웹페이지에 나오게 하는 부분이 두번째였다.
props는 주어진 객체가 들어있는 배열이 되겠고 state는 입력창에 새로운 메세지를 적어 올리게 되는 데이터다.
여기서 생긴 고민은 사전 데이터 props를 가지고 메세지를 웹페이지에 나오게 하는데 새로운 메세지와 기존 메세지가
둘 다 나오게 하려면 새로운 메세지를 입력창에 입력해서 버튼을 눌렀을 때 변화상태를 함수안에 전해줘야 하는데
props는 변하지 않는 데이터인데 그 데이터의 변화를 어떻게 나타내야 하는지 고민이되었다.
변화는 데이터의 요소 추가 삭제로 감지되는 것인지 기준을 잘 알 수 없었다.
그래서 props 에 직접 추가하면 추가된 요소로 변화를 인지하게 되지 않을까 해서 시도를 해봤지만
원하는 답이 아니었다.
이벤트가 일어났을 때 함수가 호출되고 그 호출된 함수 안에 useState의 변화를 받는 함수에 변화되는 값을 넣으면
변화가 담길 함수에 전달되게 되는 과정을 거치게 된다. 그때 변화가 담길 변수에 기존과 변화가 생기면
그 변화에 랜더링 하게 된다.
오해가 생긴 것은 변화는 어디에서 오는가 였다. 변화의 초점이 초기값에 집중하고 있었던 것이다.
변화된 값을 함수에 넣어주면 되는데 애초에 변화를 초기값 자체를 변하게 하려는 시도를 수 없이 많이 했다.
초점을 맞춰야 할 곳은 useState 선언할때 배열에 담긴 변수와 함수에 초점을 맞췄어야 했는데
초기값만 생각을 하다가 같은 곳에서 다른 곳을 보게 된 경우가 되었다. 그리고 그때는 useState가
변화를 감지하는 방식을 알지 못했다.
React 문서를 보면 데이터 변화를 하나하나 따지려면 정말 많은 데이터를 비교하고 찾아야 하는데 그런 방법은
비효율적이라는 것이다. 그것보다 그냥 주소값이 다르면 다름으로 인정하는게 더 효율적이라는 것이다.
생각해보면 지금은 적은 데이터지만 정말 많은 데이터를 처리하게 된다면 작은 변화를 찾기 위해 매번 모든 데이터를
찾기보다 확실히 다른 데이터인 주소값을 변경해서 담아주면 바로 변화를 인식할 수 있겠다는 생각을 하게 되었다.
정말 그런 비교가 필요할 때만 비교하게 하고 다름을 인식시키는 변화를 우리가 만들어줄 때는 요소를 비교하게
하는 방법이 아닌 주소값을 다르게 해서 인식하게 하는방법 더 빠르고 효율적이라는 것이다. 생각해보니 정말
그 방법이 효율적이라는 생각을 했다.
그리고 삽질을 하면서 return을 어떻게 사용해야 하는지에 대해서도 생각을 하게되었다. 아직 익숙치는 않지만
많이 연습해야겠다. 그리고 전개문법도 더 공부해야겠다.
