React - state

state만드는 법 

기존에는 let posts = '값' 이렇게 변수에 데이터를 저장했었는데 리액트에선 변수 말고 state를 만들어서 데이터를 저장 할 수 있습니다. 

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 이름을 자유롭게 작명한 다음 나중에 자유롭게 사용하면 됩니다. 

 

 

아래와 같이 코드를 작성하고 저장하고 실행해보면 

글제목 부분에 '남자 코트 추천'이 나옵니다. 

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

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에 쓰는 html도 자동으로 재렌더링 해줍니다. 

 

아래의 코드를 봅시다

let post변수에 있던걸 {post} 데이터바인딩 한 상태입니다. 

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

그 변경사항도 html에 반영되게 하고 싶으면 직접 변수 내용 바뀌었으니까 html도 고쳐주세요 라고 코드를 작성해야합니다.(원래 js에서는)

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

  return (
    <h4>{ post }</h4>
  )
}

 

하지만 아래처럼 state를 만들어서 사용하면

state 변경이 일어나면 state가 포함된 html을 자동으로 재렌더링 해줍니다. 

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

  return (
    <h4>{ 글제목 }</h4>
  )
}

 

그럼 우리가 작성하였던 블로그 로고 같은 데이터도 state로 만들어두고 {데이터바인딩}해야할까요?

• 그래도 되지만. 블로그 로고명은 거의 바뀌지 않습니다. 따라서 바뀌지 않는 데이터들은 state로 굳이 저장할 필요 없습니다. state의 가장 큰 장점은 state가 변경될 때마다 자동으로 state와 관련된 html이 재렌더링이 된다는 것인데 로고명은 의미가 없습니다.(state는 상품명, 글제목, 가격, 이런것 처럼 자주 변할 것 같은 데이터들을 저장하는게 좋습니다)

 

그래서 어떤 점이 좋은걸 까요?

• UI 기능 개발도 매우 편리해집니다.
• 사이트가 부드럽게 동작할 수 있습니다. 

 

---

참고자료

https://codingapple.com/course/react-basic/

React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌