D-68

리액트를 쓰는이유?

• 데이터 바인딩이 쉬움 : {}로 변수명,함수형 데이터 집어 넣을 수 있음
• 이미지는 import 로 이미지 넣고, src={} 가로 안에 집어 넣는다.
  -style 은 style={{key:value}} obj 형식으로 넣으면 가능하다.

리액트 데이터 보관 방법

• 변수명으로 보관한다.
• 또는 state를 사용한다.

useState 사용방법

-import에 useState를 한다.

• return전에 let[a,b] = useState(하고싶은말)을 쓴다.
• • a = 하고싶은말, b = 변경하고 싶은 말

function App() {
 let posts = '강남고기 맛집'
 let [글제목, 글제목변경] = useState('남자코드추천')
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 Blog</div>
      </div>
      <div className = "list">
        <h3>{ 글제목 }</h3>
        <p>2월 9일 발행</p>
        <hr></hr>
      </div>
    </div>
  );
}

변수로 할당안하고 왜 state사용해??

• 변수로 사용하면, 변수를 새로 업데이트 할때마다 새로고침; 버튼을 맨날 눌러야함.
• state를 사용하면 재랜더링 안해도 자동 업데이트 된다!

useState 사용방법