[React] 코딩애플 리액트 강의 4~6강

html 태그에 js이벤트 태그를 넣을 수 있다. 클릭 이벤트는 onClick={}으로 중괄호안에다 함수나, 람다식을 넣을 수 있다.

onClick={함수 또는 람다식}

이걸 사용하면 버튼을 대신 사용할 수 있다. 우리는 좋아요 버튼을 만들었는데 사용할 때마다 html을 재로딩을 하는 useState를 사용하면 된다고 한다. useState를 사용하여 변수를 만든다.

let [like, setLike] = useState(0);

이렇게 만들면 이제 like는 불러올 수 있는 변수, setLike는 변수를 설정하는 변수로 사용이 된다.

<h4>{ text[0] } <span onClick={ ()=>{setLike(like+1)}  }>👍</span> {like} </h4>

이런식으로 사용하면

이런식으로 뜨고 따봉을 누르면 숫자가 하나씩 늘어난다.

이제 코딩애플에서 준 숙제를 해볼 건데 처음에는 이런식으로 코드를 쳐봤다

  let [text, setText] = useState(['남자코트 추천', '강남 우동맛짐', '리액트 독학'])
  let [like, setLike] = useState(0);
  
  function setTextButton(){
    setLike[0](setText[0] = '여자코트 추천';)
  }

이런식으로 실행했지만 당연하게도 에러가 났고 useState배열을 이용한 변수 변경방법을 찾아보았지만 이런식으로 결과가 나왔다

함수생성 -> 함수안에 복사할 변수 만들기 -> 복사한 변수에 값 넣기 -> 값을 이제 변수저장하는 변수에 저장하기

이런식으로 생성해 해결되었다

  let [text, setText] = useState(['남자코트 추천', '강남 우동맛짐', '리액트 독학'])
  let [like, setLike] = useState(0);
  
  function setTextButton(){
    let copy = [...text];
    copy[0] = '여자코트 추천';
    setText(copy);
  }

이런식으로 생성해 버튼을 만들어 onClick에다 함수를 넣으면 된다.

이제 컴포넌트를 만드는 방법을 알아볼텐데, 컴포넌트 생성 방법은 비슷하다.
함수를만들고, return()안에다 jsx문법을 똑같이 적으면 되는것이다. 컴포넌트를 쓰는 이유는 간단하다. html에다 div덩어리들이 많다면 어떠한가? html의 가독성이 엄청나게 떨어질것이다. 그러니 만들어서 쓰는것인데. 이제 어떤방식으로 쓰는지 자세하게 봐보자

function App() {
  let [text, setText] = useState(['남자코트 추천', '강남 우동맛짐', '리액트 독학'])
  let [like, setLike] = useState(0);

  return (
    <div className="App">
      <div className="black-nav">
        <h4>
          React Velog
        </h4>
      </div>
      <div className='list'>
        <h4>{ text[0] } <span onClick={ ()=>{setLike(like+1)}  }>👍</span> {like} </h4>
        <p>8월 28일 발행</p>
      </div>
      <div className='list'>
        <h4>{ text[1] }</h4>
        <p>8월 28일 발행</p>
      </div>
      <div className='list'>
        <h4>{ text[2] }</h4>
        <p>8월 28일 발행</p>
      </div>

      <Modal></Modal>
    </div>
  );
}

function Modal(){
  return(
    <div className='modal'>
        <h4>제목</h4>
        <p>날짜</p>
        <p>상세내용</p>
    </div>
  )
}

이런식으로 작성하고 App함수에다 Modal이라는 함수를 적으면 이제 modal에 있는 div가 적용이 된다

이제 컴포넌트로 만들면 좋은것들을 알아보자

변경되면 좋은 것들

1. 반복되는 div나 덩어리들
2. 엄청나게 큰 페이지들
3. 자주 변경되는 페이지들

이 3가지를 컴포넌트화 시키면 코드 관리하기도, 가독성이 좋아지는 것이다.
하지만 이 편한 컴포넌트에도 아주 불편한 점이 있는데 바로 다른 함수에 있는 useState를 사용할 수가 없다는 점이 단점으로 꼽을 수 있다.

이제 무료로 풀링 코딩애플 리액트 강의는 시청을 다 확인했는데 만약 시간이 더된다면 내가 원하는 웹을 만들면 좋을것 같다.

githubLink : https://github.com/gunggme/CodingApple_React