[React] useState로 상태만들기 / 상태 끌어올리기

useState는 뭘까?

 

리액트에서 상태를 바꿔줄 때 useState를 사용한다.

 

useState 괄호 안의 값은 초기값을 의미한다. 1을 초기값으로 설정해준 것.

 

 

counterState는 두개로 나뉘는데

useState의 첫번째 인자는 counter 그 자체이고 (counter에 useState의 초기값 들어감)

useState의 두번째 인자는 setCounter인데 얘는 counter를 조작하는 역할을 한다.

 setCounter는 counterState의 두번째 인자며, counter를 조작하는 역할을 한다.

 

setCounter 함수를 통해 counter를 바꿀 수 있다!

 

https://www.daleseo.com/react-hooks-use-state

 

React Hooks: useState 사용법

 

이 자료를 보면 좀더 useState를 잘 이해할 수 있었는데

 

const[<상태값 저장 변수>,<상태값 갱신함수>]=useState(<상태 초기값>);

이였다!

 

그니까 정리하면

 

const[counter,setCounter]=useState(1); 이 될 것이고

counter가 상태값 저장 변수

setCounter가 상태값 갱신함수가 되겠다! (그래서 함수였던 거구먼!)

 

요렇게 쓰면 되겠다..!

 

직접 구현해봅시다!

 

<form>태그를 통해 submit을 구현해줬는데

여기서 생성을 누르면 counter가 1씩 증가되는 상태를 앞서 본 counter를 통해 구현해볼 것이다.

 

우선 폼 제출 이벤트를 handle하는 컴포넌트를 구현한다.

setCounter 함수를 통해 counter 변수를 1씩 증가시킨다. 

그리고 아까 위에 구현해놓은 counter 밑에 console.log를 찍어서 counter가 증가하는지 

확인하면된다!

 

생성을 눌렀을 때 counter가 하나씩 늘어나는 걸 확인할 수 있다!

 

useState 활용

 

앞서 본 카운터를 활용해서 

"제출" 버튼을 누를 때 마다 MeaningsLand 2, MeaningsLand 3 이런식으로 바뀔 수 있게 해보겠다 

 

약간 문제가 있다. 카운터가 있는 곳과 텍스트가 있는 곳의 컴포넌트가 다르다.

텍스트는 HeadText 컴포넌트에

카운트는 form컴포넌트에 

이 모든 것은 엘리먼트인 finalImage에서 불려진다

 

finalImage를 부모 컴포넌트로 쓸 것 이기에

컴포넌트로 바꿔주고 

 

주의!! event.preventDefault()이다! 이거 때문에 거의 4시간 동안 에러메세지만 받았다...ㅜㅜㅜ

form 컴포넌트에 있던 애들을 다 finalImage 컴포넌트로 이동시킨다.

 

handlFormSubmit이 아래로 가버렸기 때문에

Form에서 handleFormSubmit를 이용하기 위해서는 props로 받아와야하기에 매개변수로

{handleFormSubmit}을 넘겨줬다.

 

finalImage컴포넌트에는 

MeaningsLand 1 <--이런식으로 숫자가 반영되야 하므로 jsx 문법으로 감싸줬고

Form 컴포넌트에서 props로 handleFormSubmit을 받아와야하므로 FinalImage 컴포넌트의

handleFormSubmit 함수를 넘겨준다. 

 

props를 통해 counter,setCounter를 하나하나 옮겨주는게 아니라 

자식 컴포넌트에서 쓰던 거를 부모컴포넌트로 끌어올리는것을 "상태 끌어올리기"라 한다! 

 

props를 통해서 component의 이동이 이해가 잘 안돼서 공식문서를 찾아봤다

https://ko.reactjs.org/docs/components-and-props.html

Components와 Props – React

아무튼 결과는 잘 실행된다

생성버튼을 눌렀을 때 기준으로 이미지를 바꾸려면?

 

우선 들어가기 전에 내가 했던 치명적인 실수를 하나 적으려 한다. 사실 지금 html도 익숙하지 않은 상황에서 웹페이지 만들어보고 싶어서 씨름하고 있기에 했던 실수 같은데

 

src 속성은 img태그에서만 쓸 수 있는거다! img를 props로 쓰니까 지금 좀 헷갈리는것 같다 허허

 

아무튼..!

이렇게 처음에는 초록색 사진이 나왔다가 생성버튼을 누르면

 

이렇게 하늘색 사진이 나오게 해볼 것이다!

 

 

우선 실질적으로 render시키는 컴포넌트인 App 컴포넌트를 보면

 

이렇게 이미지 url이 걸려있는 것을 볼 수 있다. 이러면 정적으로 구현한 것이기 때문에 생성버튼을 누르면 당연히 이미지가 바뀌지 않는다..!

 

그래서 

greenImg와 blueImg에 각각 초록색 사진, 파란색 사진 url을 넣고

그 다음에 아까 배운 useState를 쓸 것이다. 당연히 초기값에는 greenImg가 들어갈거다.

setBlueImage 함수를 통해 생성 버튼을 누르면 blueImg로 바뀌도록 한다!!

 

그리고 App 컴포넌트로 가서 

 

 jsx문법을 통해 img={blueImage}를 넣어준다 

왜냐면 blueImage에는 초기값인 greenImg가 들어가고 setBlueImage 함수를 통해 버튼이 눌리면 blueImg가 들어가기 때문!