리액트 4강 : 버튼에 지리는 기능만들기

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

- 좋아요 숫자는 변경이 자주 일어나기 때문에, state로 만들어 보기

function App() {

let post = '강남 우동 맛집';

let[글제목, 글제목변경] = useState(['남자 코트 추천', '여자 코트 추천', '아이 코트 추천'])
let [따봉, 따봉변경] = useState(0);

  return (
    <div className="App">
    <div className="black-nav">
      <h4 style = { {fontSize: '20px'}}> ReactBlog </h4>
    </div>
    <div className = "list">
      <h4>{ 글제목[0] } <span>👍</span> { 따봉 } </h4> <<< 좋아요 숫자는 state로 만들면 좋음 !
      <p>5월 10일 발행</p>
    </div>
    </div>
  );
}

 

* onClick 쓰는 법

 onClick = { } 여기 중괄호 안에는 함수 형식만 가능

- 함수 형식 ( function 이름 ( ) { } 또는 ( ) => { } 이런 형식)  

 

* state 변경하는 법

< 변경함수(변경될 state) >

let [따봉, 따봉변경] = useState(0);

  return (
    <div className="App">
    <div className="black-nav">
      <h4> ReactBlog </h4>
    </div>
    <div className = "list">
      <h4>{ 글제목[0] } <span onClick = { () => { 따봉변경(따봉+1) } }>👍</span> {따봉} </h4>
      
      <<< 따봉변경('변경할 새로운 state') 입력하면, state변경 가능 !
          👍버튼 클릭시, 숫자가 1씩 계속 증가함 !
      
      
      <p>5월 10일 발행</p>
    </div>

 

** 오늘의 숙제 !

- 버튼 누르면 첫 글이 '남자 코트 추천' 에서 '학생 코트 추천'으로 바뀌는 기능 만들기

function App() {

let post = '강남 우동 맛집';

let[글제목, 글제목변경] = useState(['남자 코트 추천', '여자 코트 추천', '아이 코트 추천'])
let [따봉, 따봉변경] = useState(0);

  return (
    <div className="App">
    <div className="black-nav">
      <h4> ReactBlog </h4>
    </div>
    
    <button>글수정<button>
    
    <div className = "list">
      <h4>{ 글제목[0] } <span onClick = { () => { 따봉변경(따봉+1) } }>👍</span> {따봉} </h4>
      <p>5월 10일 발행</p>
    </div>
    </div>
  );
}

 

* 정답 *

1) 가능하지만 비추천 방식

    <button onClick = { () => { ['학생 코트 추천', '여자 코트 추천', '아이 코트 추천']} }>글수정</button>

2) 이렇게도 가능하지만, 더 개발자스럽게 하기 위해서는,

<button onClick = { () => {
        글제목[0] = '학생 코트 추천';
        글제목변경(글제목);
     } }>글수정</button>

3) 추천 방식 ( array / object 다룰 때, 원본은 보존하는게 좋음 ! )

<button onClick = { () => {
        let copy = [...글제목];
        copy[0] = '학생 코트 추천';
        글제목변경(copy);
     } }>글수정</button>
     
     여기 내용들은 button안의 함수에서 저장하고 실행해야 작동함 !