TIL: 2022-09-30

⚙️ 오늘 배운 주제

React Props & State

 

🐹 오늘의 기분

바닐라 자바스크립트에서 DOM과 이벤트 객체로 이벤트를 핸들링했던 것처럼, 오늘은 리액트에서 그렇게 하는 방법을 배웠다. props와 state의 차이가 무엇인지 공부할 때까지만 해도 괜찮았는데 막상 코드를 보니 머릿속이 또 새하얘졌다. 페어활동 전 코드펜 실습부터 어엉? 이러고 있었음. 어제 코치님이 저녁에 올려주신 코드펜 다른 예제들을 보면서 겨우 풀었다.

페어 시간에는 이 Props랑 State를 다루는 코드를 직접 써봐야 했다. 페어분과 같이 하니 생각보다 빨리 진행됐다. 이틀 동안 하는 과제길래 많이 겁먹었었는데 일찍 끝나서 신기함. 버튼 동작에서 막혀가지고 한참 헤맸었는데 애꿎은 원본 데이터를 렌더링하고 있었다는 걸 뒤늦게 깨달았다. 근데 Props를 안 쓰고 풀어가지고 props를 쓰는 코드를 더 고민해봐야할 것 같다. onChange나 onClick 같은 이벤트 핸들링은 바닐라 자바스크립트에서도 이해가 덜 됐던 부분이라 여기를 집중적으로 다시 공부해봐야겠다. 

 

🗝 키워드

Props, State, useState, 이벤트 핸들링, 데이터 흐름

 

🗣 스스로에게 설명

Props = 외부로부터 전달받은 값, 부모 컴포넌트로부터 전달받은 값, 객체 형태, read-only, 함부로 변경되면 안 됨.

State = 컴포넌트 내부에서 변할 수 있는 값, 객체 형태

 

뭘 찾아봐도 잘 모르겠어서 공식 문서를 읽으며 정리해봤다.

코드는 대부분 공식 문서에서 가져온 것이다. (코드펜에서 실습해볼 수도 있어서 공식 문서를 읽어보는 것을 추천한다!)

Component and Props

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen. 

리액트에서는 컴포넌트를 함수 방식, 클래스 방식 이렇게 두 가지로 만들 수 있다. 

props는 컴포넌트의 속성을 의미하며 컴포넌트는 props라는 무작위 input을 받아 화면 구성 방식이 담긴 React element를 반환한다. 

Hook 도입 전에는 class 컴포넌트에서만 쓸 수 있는 기능들이 있었지만, hook 도입 이후 함수에서도 똑같이 구현이 가능해졌다. (오히려 함수 컴포넌트에서 더 나은 방식으로 구현된다고 함)

 

리액트 엘리먼트는 사용자가 만든 컴포넌트를 반환할 수 있다.

아래 코드에서 element 변수는 사용자가 미리 정의한 Welcome이라는 컴포넌트에 이름 속성으로 Katie를 넣은 것을 반환하고 있다.

const element = <Welcome name="Katie" />;

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Katie" />
      <Welcome name="Daniel" />
      <Welcome name="Andy" />
    </div>
  );
}

이렇게 여러 번 불러올 수도 있음.

Welcome 컴포넌트는 props의 name 속성에 정의된 값을 문자열로 리턴하고 있다. 

 

App 컴포넌트를 렌더링하면 화면에는 사진과 같이 출력된다.

 

Props는 읽기 전용이어야만 한다.

컴포넌트를 정의할 때 props를 직접적으로 손상시키지 않도록 순수함수로 작성해야 한다. 

// 순수함수
function sum(a, b) {
  return a + b;
}

// 비순수함수. 함수 내부에서 account.total의 값을 변화시키고 있다.
function withdraw(account, amount) {
  account.total -= amount;
}

Components and Props – React

 

State and Lifecycle

어플리케이션의 UI는 값이 동적으로 자주 변한다.

쇼핑몰만 봐도 장바구니에 담긴 물건의 수량, 특정 상품의 가격 등등 변화하는 요소가 아주 많다.

이렇게 컴포넌트 내부에서 변할 수 있는 값은 State로 다뤄야 한다. 

 

State는 props와 비슷하지만 온전히 컴포넌트에 의해서 컨트롤된다는 차이가 있다.

State를 쓰기 위해서는 useState를 import해와야 한다.

import React, { useState } from 'react';

 

useState는 두 요소가 담긴 배열을 반환한다.

첫 번째 요소는 상태를 저장할 변수, 두 번째 요소는 상태를 갱신시켜줄 함수이다.

두 요소를 더 편하게 정의하기 위해 구조분해할당을 이용한다. 

 

체크박스의 체크 여부를 state로 관리하려고 한다고 가정해보자.

const [isChecked, setIsChecked] = useState(false);

useState() 내부에는 isChecked에 부여해줄 초기값을 작성한다.

여기에는 꼭 불리언 타입이 아니더라도 0, 빈 문자열, 빈 배열 혹은 이미 존재하는 데이터 등등 용도에 따라 다양한 초기값이 들어갈 수 있다.

 

useState()를 쓸 때의 주의점

1. state를 직접적으로 수정하지 않는다.

react 컴포넌트는 state가 바뀔 때마다 리렌더링된다.

state는 무조건 상태 변경 함수로만 변경해야 하며, 직접적으로 변경할 경우 렌더링이 되지 않거나 state가 제대로 바뀌지 않는 문제가 발생한다. 

const [comment, setComment] = useState('some comment');

// wrong
comment = 'some new comment';

// correct
setComment('some new comment');

 

2. useState는 최상위레벨에서만 불러온다.

반복문, 조건문, 중첩 함수에서 사용하지 않는다. 

function CheckBox1() {
  const [isChecked, setIsChecked] = useState(false);
  
  // ...
}

 

3. 일반 자바스크립트 함수에 사용하지 않는다.

 

 

State and Lifecycle – React

 

Handling Events

이벤트 다루기는 자바스크립트에서와 비슷하며, 문법만 살짝 바뀐다.

 

이벤트는 카멜케이스로 작성하며, 이벤트 핸들러는 문자열이 아닌 자바스크립트 함수명 그 자체를 전달한다.

// html에서
<button onclick="upload()">
  등록
</button>

// React에서 
<button onClick={upload}>
  등록
</button>

onclick -> onClick

"upload()" -> {upload}

 

함수를 호출하는 것이 아닌 함수명 그 자체를 전달하는 것에 주의하기

 

핸들러 함수에 전달인자가 필요한 경우에는 화살표 함수를 이용한다.

<button onClick={()=> upload(sth)}>
</button>

 

function Toggle() {
  const [isToggleOn, setIsToggleOn] = useState(true);

  function handleClick() {
    setIsToggleOn(!isToggleOn);
  }
  
  return (
    <button onClick={handleClick}>
      {isToggleOn ? 'ON' : 'OFF'}
    </button>
  );
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

이 코드를 보면 버튼이 클릭되는 onClick 이벤트가 발생할 때마다 Toggle 컴포넌트 내부에 생성한 handleClick 함수가 호출된다.

handleClick 함수는 useState의 setIsToggleOn 함수를 호출하여 토글의 상태를 담은 isToggleOn의 불리언값을 반전시키고 있다.

return문의 button 태그에서는 삼항연산자를 통해 isToggleOn의 상태에 따라 버튼의 텍스트가 바뀌도록 하고 있다.

 

이 코드를 실행하면 이렇게 나온다.

버튼을 누를 때마다 isToggleOn의 상태가 바뀌고 있기 때문에 텍스트도 덩달아 바뀌는 것을 볼 수 있다.

 

Handling Events – React

 

❓ 막히는 or 막혔던 부분

React Hook의 개념이 잘 와닿지가 않았음

 

🔍 공부가 더 필요한 부분

useState 예제 더 살펴보기

이벤트 핸들링