[React] 3강 | state 쓰면 뭐가 좋냐면

변수와 state

---

• 글 목록 UI 만들기
  • App.jsx

      return (
          <div className="App">
          <div className="black-nav">
          <h4 style=>MyBlog</h4>
          </div>
          <div className="list">
          <h4>글제목</h4>
          <p>2월 18일 발행</p>
          </div>
          </div>
      )
    

  • App.css

      div {
          box-sizing: border-box;
      }
      .list {
          padding-left: 20px;
          text-align: left;
          border-bottom: 1px solid grey;
      }
    

• return() 안에는 병렬로 태그 2개 이상 기입 X
• 자료 잠깐 저장할 땐 변수 (let, var, const)
• 자료 잠깐 저장할 땐 state
  • state 생성
    • App.jsx

        function App() {
            const [count, setCount] = useState(0)
      
            let post = '블로그 글 제목'
            let [a, b] = useState('스팀 세일 할인 목록')
      
            return (
                <div className="App">
                <div className="black-nav">
                <h4 style=>MyBlog</h4>
                </div>
                <div className="list">
                <h4>{a}</h4>
                <p>2월 18일 발행</p>
                </div>
                </div>
            )
        }
      

    • Destructuring 문법: array에서 각각 변수로 뽑기기

        let num = [1, 2];
      
        let [a, c] = [1, 2]; //destructuring
                  
        let a = num[0];
        let c = num[1];
      

  • 왜 state?
    • 일반 변수는 갑자기 변경되면 html에 자동으로 반영 하지 않음
    • state는 변경될 시 html은 자동 재렌더링됨
• 글 제목 state로 만들기(숙제)
  • App.jsx

      let [글제목, c] = useState(['스팀 할인 목록', '3월 전시 목록', '2025 영화 개봉작 목록'])
    
      return (
          <div className="App">
          <div className="black-nav">
          <h4 style=>MyBlog</h4>
          </div>
          <div className="list">
          <h4>{글제목[0]}</h4>
          <p>2월 18일 발행</p>
          </div>
          <div className="list">
          <h4>{글제목[1]}</h4>
          <p>2월 18일 발행</p>
          </div>
          <div className="list">
          <h4>{글제목[2]}</h4>
          <p>2월 18일 발행</p>
          </div>
          </div>
      )