React 걸음마_ 자주바뀌는 html은 useState 사용하자!

잠시 저장할 때는 let, const에 변수를 담아주지만
중요하고 자주바뀌는 html부분은 useState에 state 변수로 담기!!
  😈 let [ state , state 변경 함수] = useState(); 😈

  let post = "Ariana Grande";
  let [title, setTitle] = useState("Daydreamin'");
  //😈let [ state, state 변경 함수] = useState();

 

array자료형 (변수 2개일 때) => 인덱스[ ]로 가져올 수 있음!

 

  let num = [1,2];
  let a = num[0]; // 1
  let b = num[1]; // 2 
  // 한번에 2개변수를 담을 때
  let [ a, b ] = [1, 2];

=> 이것을 Destructuring문법이라고 함.

 

😈 변수를 사용할 땐 중괄호 { } 안에 넣기

App.js

function App() {

  let post = "Ariana Grande";
  let [title, setTitle] = useState("Daydreamin'");

  return (
    <div>
      <div className='black-nav'>
        <h4>Blog</h4>
      </div>
      <div className="list">
       <h5>{title}</h5>
       <p>10월 18일 발행</p>
      </div>
    </div>
  )
}

 

참고) 변수에 있던걸 html에 넣는 작업을 데이터바인딩이라고 한다

 

🚩 과제) useState사용하여 아래와 같이 만들기

App.js

function App() {

  let post = "Ariana Grande";
  let [title, setTitle] = useState(["Daydreamin'","Last Christmas", "imagine"]);

  return (
    <div>
      <div className='black-nav'>
        <h4>Blog</h4>
      </div>
      <div className="list">
       <h5>{title[0]}</h5>
       <p>10월 18일 발행</p>
      </div>
      <div className="list">
       <h5>{title[1]}</h5>
       <p>10월 18일 발행</p>
      </div>
      <div className="list">
       <h5>{title[2]}</h5>
       <p>10월 18일 발행</p>
      </div>
    </div>
  )
}

=> array자료형을 useState에 저장하고 인덱싱으로 데이터바인딩 해주었다.

 

😈 좋아요버튼&갯수 UI만들기

어떤것을 state로 만들면 좋을까? 생각해보기

이벤트 함수 onClick사용 => state 변경 함수인 setLike함수 실행 

 

방법1) 화살표 함수 ( )=>{ }

<h5>{title[0]}<span onClick={()=>{setLike(like+1)}}>💖</span> {like} </h5>

방법2) function 따로 선언한 후 사용

function likeHandler (){
    setLike(like+1)
  }
return (
	<h5>{title[0]}<span onClick={likeHandler}>💖</span> {like} </h5>
)

방법3) 이벤트함수안에 바로 넣기

<h5>{title[0]}<span onClick={function(){setLike(like+1)}}>💖</span> {like} </h5>

 

😈 글수정버튼 만들기

 

=> 권장하지 않는 방법

방법1)

<button onClick={()=>{
setTitle(["Ariana Grande","Last Christmas", "imagine"])
}}>글수정</button>

방법2)

 <button onClick={()=>{
        setTitle[0] = 'Ariana Grande';
        setTitle(title);
      }}>글수정</button>

=> 🤷‍♀️ 왜 ? 방법1은 하나만 바꿀 건데 전부 다 써주어야해서  효율성이 없고, 방법2는 원본을 보존할 수 없다는 단점이있음.

copy본을 하나 만들어주자!! ( 원본 보존 )

<button onClick={()=>{
    let copy = [...title];
    copy[0] = 'Ariana Grande';
    setTitle(copy);
    }}>글수정</button>

    let copy = [...title];

=>...은 괄호를 벗겨주세요라는 뜻! [ ] 는 다시 괄호 씌워서 사본 생성!

❗ state가 array/object면 copy(사본)을 만들어서 수정해야 함!!

 

과제 ) 버튼누르면 글제목 가나다순 정렬 기능 만들기

 

 

정리

useState을 어느 곳에 사용해야 할지 다시 생각해보는 시간이었다.

로고나 헤더의 메뉴바에 있는 것들은 자주 바뀌는 것이 아니므로 사용하기엔 적절하지 않다.

블로그의 게시글을 올리는곳은 제목이 자주 바뀌므로 useState를 써주는 것이 좋겠다.

array자료형도 쓸수있어 여러 값을 저장해서 인덱스로 가져와서 쓰면 되니까 참 편리한 것 같다.