state를 왜 쓰는가?

state 만드는 법

이전 강의에서는 그냥 let posts = '어쩌구' 이렇게 변수에 데이터를 저장했었는데

리액트에선 변수 말고 state를 만들어서 데이터를 저장해둘 수 있습니다.

이번엔 state를 이용해 데이터를 잠깐 저장해보도록 합시다.

import { useState } from 'react';
import './App.css'

function App(){

let [a,b] = useState('남자 코트 추천');
let posts = '강남 우동 맛집';
return (

<div className="App">
  <div className="black-nav">
    <div>개발 blog</div>
  </div>
  <div className="list">
    <h4>글제목</h4>
    <p>2월 17일 발행</p>
    <hr/>
  </div>
</div>

)
}
맨 윗줄에 import {useState} from 'react' 하고

원하는 곳에서 useState('보관할 자료') 쓰면 state에 자료를 잠깐 저장할 수 있습니다.

그리고 저장한 자료를 나중에 쓰고 싶으면

let [a,b] = useState('남자 코트 추천');

a 자리에 state 이름을 자유롭게 작명한 다음 나중에 자유롭게 사용하면 됩니다.

Spoiler

변수명을 약간 더 직관적으로 작명하면

let [글제목, b] = useState('남자 코트 추천');
이렇게 하면 조금 더 직관적으로 이해할 수 있겠군요.

글제목이라는 변수에는 '남자 코트 추천'이라는 자료가 들어간댔으니

한번 html에 중괄호로 {글제목} 넣어보십시오. 진짜 나오지 않습니까

function App(){

let [글제목, b] = useState('남자 코트 추천');
let posts = '강남 우동 맛집';
return (

<div className="App">
  <div className="black-nav">
    <div>개발 blog</div>
  </div>
  <div className="list">
    <h4>{ 글제목 }</h4>
    <p>2월 17일 발행</p>
  </div>
</div>

)
}
이렇게 짜고 저장해보면 진짜 글제목 부분에 '남자 코트 추천'이 나오는군요.

그래서 결론은 리액트에선 일반 변수대신 state 이용해도 자료를 잠깐 저장해둘 수 있다는겁니다.

맘대로 쓰도록 합시다.

변수 말고 state에 데이터 저장해서 쓰는 이유

새로운 문법을 배웠으면 이걸 어디에 쓸 지 생각해봐야합니다.

그걸 알아야 나중에 혼자서 코드짤 때도 자신있게 state를 가져다 쓰는 것임

잘 생각해보면 state도 용도는 그냥 변수랑 똑같습니다. 자료 잠깐 보관하는게 끝인데

그럼 변수 만들어 쓰면 되는거지 왜 굳이 state 만들어쓰냐고요?

state는 변동사항이 생기면 state쓰는 html도 자동으로 재렌더링해줍니다

function App(){
let post = '강남 우동 맛집'

return (

<h4>{ post }</h4>

)
}
▲ let post 변수에 있던걸 {post} 이렇게 데이터바인딩 해놨다고 가정해봅시다.

근데 갑자기 post 변수에 있던걸 '강남 우동 맛집' -> '강남 고기 맛집' 이렇게 바꿨습니다.

그 변경사항도 html에 반영되게 하고 싶으면 어떻게하죠?

직접 여러분이 "변수내용 바뀌었으니까 html도 고쳐주세요" 라고 귀찮게 코드짜면 됩니다.

쌩자바스크립트는 원래 그래야함

function App(){
let [글제목, b] = useState('남자 코트 추천');

return (

<h4>{ 글제목 }</h4>

)
}
▲ 이번엔 state를 하나 만들어서 {글제목} 이렇게 데이터바인딩 해놨다고 가정해봅시다.

근데 갑자기 state에 있던걸 '남자 코트 추천' -> '여자 코트 추천' 이렇게 바꿨습니다.

그 변경사항도 html에 반영되게 하고 싶으면 어떻게 하냐고요?

state자료는 그럴 필요 없습니다. 여러분이 개입 안해도 자동으로 html도 바뀝니다.

state는 변경이 일어나면 state가 포함된 html을 자동으로 재렌더링 해줘서 그렇습니다.

그럼 뭐가 좋겠습니까

• 그리고 UI 기능 개발도 매우 편리해지고

• OT강의에서 설명드렸던 사이트처럼 스무스하게 동작하는 것임

Q. 그럼 블로그 로고 같은 그런 데이터도 state로 만들어두고 {데이터바인딩} 할까요?

그러셔도 됩니다. 하지만 블로그 로고명은 거의 바뀌지 않죠?

바뀌지 않는 데이터들은 state로 굳이 저장할 필요 없습니다.

state의 가장 큰 장점은 state가 변경될 때마다 자동으로 state와 관련된 html이 재렌더링이 된다는 것인데

로고명은 아예 바뀔 일이 없으니 의미가 없겠죠.

state는 상품명, 글제목, 가격 이런것 처럼 자주 변할 것 같은 데이터들을 저장하는게 좋은 관습입니다.

오늘 수업을 빡대가리 레벨로 정리해드리면

자주변경될 것 같은 데이터들은 state에 저장했다가 html에 {데이터바인딩} 해놓으십시오

1. 변경할 일이 없는 데이터들

2. 굳이 html에 표기가 필요없는 데이터들은 그냥 변수에 저장해도 됩니다.

실은 지금은 변수나 state나 별 차이 없어보이는데

다음 시간에 state 데이터를 변경하는 법을 한번 배워서 진짜 앱처럼 스무스하게 바뀌는지 실험해봅시다.

일단 오늘 숙제나 해오십시오

컴포넌트 만드는 법

1. function 만들거
2. return() 안에 html 담기
3. <함수명></함수명> 쓰기

• 어떤걸 컴포넌트로 만들면 좋은가

1. 반복적인 html 축약할 때
2. 큰 페이지들
3. 자주 변경되는 것들

동적인 UI 만드는 step

1. html css로 미리 다지인완성
2. UI의 현재 상태를 state로 저장
3. state에 따라 UI가 어떻게 보일지 작성