React 강의 과제

Stella·2025년 4월 11일

react 구조

return() 안에 html 코드를 작성한다.

State 만들기

import {useState}

let[a,b] = useState('여자 코트 추천');
a -> state에 보관했던 자료 나옴
b -> state 변경 도와주는 함수
a,b -> 다 작명할 수 있다

State를 왜 쓰는가?

state -> 갑자기 값이 변경되면 자동으로 html 자동 재랜더링됨
모든 것을 state로 만들 필요는 없고, 변동시 자동으로 html에 반영되게 만들고 싶을 때 쓰면 된다! (제목, 날짜 등)

State 사용해보기

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

function App() {
  //let post = `강남 우동 맛집`;
  let [남자코트, b] = useState('남자 코트 추천');
  let [여자코트, e] = useState('여자 코트 추천');
  let [맛집, d] = useState('강남 우동 맛집');


  //state -> 갑자기 변경되면 자동으로 html 자동 재랜더링됨
  let [logo, setLogo] = useState('ReactBlog');
  let num = [1,2];

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


  return (
    <div className="App">
      <div className="black-nav">
        <h4> React Blog</h4>
      </div>
      <div className="list">
        <h4>{남자코트}</h4>
        <p>April 11 published</p>
      </div>
      <div className="list1">
        <h4>{여자코트}</h4>
        <p>April 11 published</p>
      </div>
      <div className="list2">
        <h4>{맛집}</h4>
        <p>April 11 published</p>
      </div>

    </div>
  );
}

export default App; // 이거 꼭 작성해줘야 함

여러 정보들을 useState에 배열로 저장해서 사용할 수도 있다

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

function App() {
  let post = `강남 우동 맛집`;
  let [글제목, b] = useState(['남자 코트 추천', '강남 우동맛집', '파이썬 독학']);

  return (
    <div className="App">
      <div className="black-nav">
        <h4> React Blog</h4>
      </div>
      <div className="list">
        <h4>{글제목[0]}</h4>
        <p>April 11 published</p>
      </div>
      <div className="list1">
        <h4>{글제목[1]}</h4>
        <p>April 11 published</p>
      </div>
      <div className="list2">
        <h4>{글제목[2]}</h4>
        <p>April 11 published</p>
      </div>

    </div>
  );
}

export default App;