[패캠 인강] React 기초 (2)

2-2) Children 

  props 안에는 children이 들어갈 수 있다. children은 그 이름에서 유추할 수 있듯이 자식, 후손 요소들을 의미한다. 어떻게 사용되는지 다음 내용을 살펴보자.

 

  먼저 App.js 를 다음과 같이 작성하면 나타나는 화면은 오른쪽 아래와 같다. 이번에 내가 해주고 싶은 일은 지금 나와있는 모든 요소들이 밋밋해서 전체적으로 통일성 있게 효과를 주고 싶다면 어떻게 해야할까? 하나하나 다 뜯어가며 고치기 보다는 이 모든 것을 한 번에 묶어서 효과를 주면 좋을 것 같다. 

 

#f5df4d 와 #939597 은 팬톤에서 지정한 올해의 컬러다

 

  Wrapper라는 새로운 js 파일을 만든 후 props 로 { children } 을 가져온다. 그러면 그 안의 모든 요소들을 가져오는 것과 같은 효과를 지니며 안의 내용들을 재사용한다. 물론 위의 결과물은 아래와 같은 코드로도 구현이 가능했다. 하지만 코드가 미친듯이 길어질 때는 유지보수를 위한 방편으로 사용해도 좋을 것 같단 생각을 했다.

 

 

3. useState 동적 상태 관리 

  react 안에는 useState 라는 동적 상태를 관리하기 위한 함수가 존재한다. 만약 컴포넌트에서 보여줘야 하는 것이 사용자로부터 입력을 받아 동적으로 바뀌는 것일 때 사용하면 된다. 이건 React 를 import하는 과정에서 { useState } 로 함께 가져와야 한다. 

 

  3-1) 카운터 만들기

  이번에 내가 할 건 좋아요 버튼을 누르면 좋아요 수가 늘어나고 싫어요 버튼을 누르면 좋아요 수가 깎이는 걸 만들어 보겠다. 수도 코드로 정리해본다면

 

// 수도코드
1) 화면에는 좋아요 개수를 표시하는 것, 버튼 두 개가 있다.
2) 버튼은 각각 좋아요 버튼과 싫어요 버튼이다.
3) 좋아요 버튼을 누르면 창의 좋아요 개수가 1씩 늘어나고
4) 싫어요 버튼을 누르면 창의 좋아요 개수가 1씩 줄어든다

 

  위에서 파악해야 하는 것은 사용자로부터 입력을 받고 동적 상태를 관리하는 것이다. 그렇기에 초반에 importfh useState를 불러온 후, 구조 분해 할당을 통해 기본 값(좋아요 수의 기본 값)과 바뀌는 값(버튼을 눌렀을 때 수가 바뀔 값)을 지정해준다.

const [likey, changeLikey] = useState(0)

  구조분해 할당할 때 맨 처음에 쓰는 건(likey) 현재 상태를 의미하고, 두 번째로 오는 건 그 기존의 상태를 바꿔줄 것을 의미한다. 그리고 useState(0) 에서의 0은 likey의 초기값이다. 일단 이것으로 좋아요 개수를 실현했다.

 

  그렇다면 이제 3)을 작성해보자. [좋아요 버튼을 누르면] 은 <button> </button> 에서 이벤트 함수 중 클릭을 받았을 때 실행되는 onClick을 사용해주면 된다. 그러려면 return 에서 작성해야 하는데 return 작성은 1), 2)번일 때 하므로 조금 있다가 작성하는 것으로 하자. 이제 좋아요 개수가 늘어나는 것은 함수를 통해서 가능하다. 이때 실행되는 함수의 이름을 likeyUp이라 하고 다음과 같이 작성한다.

const likeyUp = () {
  changeLikey(likey + 1)
}

   changeLikey는 likey가 1씩 증가하는 것으로 바꾸었다. 이게 간단하게 보면 likey 값에 1을 더한다고 하는 것처럼 보이는데, 좀 더 엄밀하게 따져보면 likey = likey+1 이고 이렇게 likey라는 기존 상태를 어떻게 바꿔줄 것이라는 걸 changeLikey라는 것을 통해서 지정해준 것이다. 그러면 이제 4)를 작성해보자 [좋아요 버튼을 누르면]은 3) 과 같이 해주면 될 것 같고 이번에 changeLikey에는 업데이트 함수를 사용해보도록 한다.

const likeyDown = () => {
    changeLikey(likey => likey - 1)
}

  업데이트 함수를 사용하는 이유는 최적화하기에 굉장히 좋은 형태를 취하고 있기 때문에 사용하다. changeLikey 안에는 화살표 함수가 들어가 있는 것이고 그 화살표 함수를 굳이, 정말 굳이 함수 선언식으로 작성한다면 

function (likey) => {
  return likey = likey + 1 
}

  이렇게 될 것이다. 화살표 함수를 애용하자. 화살표 함수는 사랑이다. 

  

  자 이제 함수도 다 작성했겠다. 1), 2) 그리고 3), 4) 할 때 [버튼을 누르면] 이라는 것도 만들어보도록 하자. 일단, [버튼을 누르면]의 경우, 함수들을 다 만들었기 때문에 2)번과 함께 다음과 같이 코딩해주면 될 것 같다. 

<button onClick={likeyUp}>Like!</button>
<button onClick={likeyDown}>Dislike!</button>

   이때 주의할 점은 이벤트 함수를 사용할 때 바닐라 자바스크립트에서도 마찬가지지만 절대 함수 실행을 쓰는 것이 아니라 함수 이름만을 쓴다는 점이다. 즉, onclick = {likeyUp()} 이렇게 쓰면 안 된다. 이제 Practice.js의 최종본은 (1)과 같고, App.js에 Import 시키면(2) 다음과 같은 화면(3)이 나타난다.

(1)

(2)

 

(3)

 

  Like와 Dislike 버튼을 누르면 굉장히 잘 된다. 

 

다음 번엔 이어서 useState를 이용해 input 상태를 관리해보자