[오늘의 일기 만들기] 리액트 useState 사용&활용하기

최근 개인프로젝트 스터디를 진행하는 중 초반 수업인데도 useState를 더욱 보기좋게 수정하는 모습을 보았다.

따라적으며 오 이렇게 되는구나 이해했다고 생각했는데, 다음날 다시 코드를 보니 내가 코드를 짜려고 하면 못할 것 같았다.

또 기록해두지 않으면 또 까먹기에 작성해보려 한다. 

---

 

기본 틀을 작성하며 어떻게 함수를 개선하는지 보자.

 

* 만약 이 글을 읽으신다면, 기본적으로 useState와 리액트가 어떤식으로 쓰이는지 쪼끔!만 이해하고 오시면 더욱 좋을 것 같습니다! 

---

간단 소개

State란

컴포넌트 내에서 유동적으로 변할 수 있는 값.

 

Hook이란

컴포넌트에서 데이터를 관리(State)하고 데이터가 변경될 때 상호작용(Effect) 하기 위해 사용.

Hook의 이름은 반드시 use로 시작해야한다.

*useState  = State Hook 이다.

 

일반적인 useState 사용하는 형태

//기본 사용
import {useState} from 'react'; //임포트해온다.

const [count, setCount] = useState(0); //0은 초깃값이다.

State 변경하는 2가지 방법

//1. setState에 변경할 값을 넣기
const [count, setCount] = useState(0);
setCount(count + 1);

//2. setState에 함수 넣기
const [count, setCount] = useState(0);
setCount((curent) => {
	return current+1;
})

함수를 넣는 경우(2번) 반환(return)하는 값으로 state가 변경된다.

현재 값을 기반으로 state를 변경하려는 경우, 함수로 넣는 방법을 권장한다.

 

자, 그럼 시작해보자.

---

input 태그에 입력되는 값 받아보기

 

 

매우 기본이 되는 틀부터 작성해보자.

 

author라는  이름으로 useState를 작성했고, 초깃값으로 '작성자'를 넣어주니 옆에 보이는 것처럼

input 태그안에는 작성자라는 글씨가 그대로 적혀있다.

input 태그가 어떻게 author에 쓰인 작성자를 보여주고 있을까? 

 

input 에 적힌 value에 {author}를 넣어주었기 때문이다.

 

단, 위 처럼 적으면 input 태그에는 입력도 되지 않는다.

setAuthor가 수정되지 않았기에 작성도 되지 않는다.

 

값이 변하는 것을 알 수 있는 onChange 이벤트핸들러를 활용해보자.

이는 예전 HTML에서 onclick 쓰던거랑 비슷한거다.

단지 리액트에서는 onclick 대신 중간의 c를 대문자로 써서 onClick 이렇게 쓴다.

 

onChange에서 함수의 형태로 e인 event를 받고 console.log를 찍어보면 아래와 같이 나온다.

 

이렇게 target에 value 값이 작성자 (useState를 활용하여 value ={author}를 했기에 ) 가 뜨는 것을 알 수 있다.

*참고로 target에 name도 author로 적힌 것은 내가 name="author"라고 적어두었기 때문이다.

e.target.name 하게 되면 name 값인 author도 가져온다 

 

이를 useState를 사용하면, input값에 입력이 가능해진다.

 

---

input 값 받아보기 2 (컨텐츠)

 

 

위와 동일하게 작성하면 된다. 그래서 매우 쉬움 !

content라는 이름의 useState를 만들고, div 태그 안에 내용이 들어갈거라 input 대신 textarea를 사용하여 만들었다.

똑같이 onChange함수로 타겟 값을 setContent로 지정해주면? 끝!

 

---

근데 이런 생각을 할 수 있다.

state 똑같이 value를 받고, onChange에서 target.value 똑같이 받네? state 둘다 문자열을 받고.. 흠 

이거 더 줄일 수 있나??

...

 

여기서부터 이제 활용하고 , 복잡해지는거다 🥲

---

state 하나로 묶기

 

 

기존에 나뉘어있던 author state와 content state를 지웠다.

그리고 보는것처럼 합치기 state로 하나로 합쳐주었다. 

**예시여서 이해하기 쉽게 합치기라는 한글로 적었다. 당연히 )영어로 적는게 좋음..

  const [합치기, 합치기변화하는곳] = useState({
    author: "",
    content: ""
  });

그 안에 객체의 형태로 author와 content를 넣어주었다.

그럼 이 두개의 값을 어떻게 활용할까?

 

        <input
          name="author"
          value={합치기.author}
          onChange={(e) => {
            합치기변화하는곳({
              author: e.target.value,
              content: 합치기.content
            });
          }}
        />

작성자 input 태그의 내용이다.

value 값에 합치기.author를 적어주어 객체의 author를 활용하는 모습이다.

onChange에서는 합치기변화하는곳을 적어주는데, 

작성자인 author가 변해야 하므로 author는 target.value를 

변하지 않아야하는 content는 기존의 형태인 합치기.content를 사용한다.

 

        <textarea
          name="content"
          value={합치기.content}
          onChange={(e) => {
            합치기변화하는곳({
              author: 합치기.author,
              content: e.target.value
            });
          }}
        />

content도 동일하다.

 

---

다시 또 질문타임이 왔다.

지금에야 보이는 객체가 author, content 두 개니까 이렇게 적었지, 

객체 안에 몇 십개, 몇 백개 되면 어떡할거야..?

그러면 각자의 onChange에도 그 모든것들을 적어두고 필요한 애만 e.target.value적고 나머지는 그대로 있게 작성해야돼?

어휴 개불편..

 

근데 모르겠어 ..ㅠㅠ 그만 개선시켜줘 ..ㅠㅠㅠㅠ

슬프지만 당연하게도 개선할 여지가 남아있다.

---

스프레드 연산자 사용하기

 

 

그렇다. 다 나열할 필요없이 spread 연산자를 쓰면 된다 ><

... 을 통해 작성하는 spread 연산자를 쓰면 

100개, 1000개 오는 객체도 문제 없다구 !

** 근데 순서 중요함! ...합치기가 e.target.value 아래에 적으면 원래의 state로 바뀌기때문에 spread를 먼저 펼쳐주고,

변경하려는 프로퍼티를 마지막에 적어야함

 

---

자.. 이제 많이 바꾼거 같은데.. 어라?

onChange 이벤트 핸들러가.. 작성자에 쓰이는거랑 내용에 쓰이는거랑 비슷하게 생겼잖아?! 

진짜 의문을 그만 갖고 싶다.

 

와우, 하나로 만들 수 있겠어!

 

---

onChange이벤트 핸들러 함수로 받아버리기 (어려움)

 

기존 e => 해서 이러쿵 저러쿵 열심히 썼던 부분, 길어서 보기 싫었다.

return 밖 handleChangeState 함수로 받아버리면 얼마나 깔끔해지게요?

 

입력된 값이 잘 받아지나 확인을 위해 console.log를 적고 , 컨텐츠에 d 를 입력하니 

콘솔에 textarea의 target.name 인 content와 내가 입력한 value d가 찍히는 게 확인된다 !

 

이 다음이 이제 매우 이해하기 어려운데,,

내가 기존에 배웠던 방법과, 강의에서 들은 방법이 있다.

 

강의에서는 아래와 같이 정의했다.

  const [합치기, 합치기변화하는곳] = useState({
    author: "",
    content: ""
  });

//강의에서 정의한 handleChangeState 함수
  
  const handleChangeState = (e) => {
    합치기변화하는곳({
      ...합치기,
      [e.target.name]: e.target.value //점표기법이 아닌 괄호표기법으로
    });
  };

 

그리고 내가 배웠던 건 아래와 같다.

  const [합치기, 합치기변화하는곳] = useState({
    author: "",
    content: ""
  });

//내가 배웠던 거
const handleChangeState = (e) => {
    const { name, value } = e.target;
    합치기변화하는곳((current) => {
      const 새로운합치기 = { ...current };
      새로운합치기[name] = value;
      return 새로운합치기;
    });
  };

const 새로운합치기로 state를  새로 정의하고 

새로운합치기[name] = value, 그리고 반환해준다.

 

이게 맨 ~위에서 내가 간단설명으로 적은 State 변경하는 두 가지 방법에서 함수로 받아서 하는걸 응용한 부분이다. 

 

괜히 한글 써서 더 헷갈리는것 같네.

한글로 말고 다시 영어로 써보면 ,,

  const [state, setState] = useState({
    author: "",
    content: ""
  });

//내가 배웠던 거
const handleChangeState = (e) => {
    const { name, value } = e.target;
    setState((current) => {
      const newState = { ...current };
      newState[name] = value;
      return newState;
    });
  };

이렇게 된다. 아 , 더 보기좋은가 ?!

e.target 의 name, value를 정의하고. newState로 현재의 상태를 고대로 받은 후에

newState[name] = value

newState[name] // e.target.name이다. 

value //e.target.value다.

고로 내가 타겟하는 이름의 타겟하는 값을 매치해주는것.

 

솔직히 아직 이렇게 못 작성할거 같다. 그래서 설명도 제대로 못하네 . 더 제대로 이해해야돼

 

---

각 요소를 한 번에 받아버릴 수 있는 handlechange는 제대로 이해하고 다시 수정하여 작성할 수 있도록 해보자