[React 입문] 2주차_React 컴포넌트

오늘의 학습내용 :  React 컴포넌트

 

◆ 컴포넌트

https://www.adcisolutions.com/knowledge/what-are-reactjs-components

 

컴포넌트(Component)란, 프로그래밍에서 재사용할 수 있는 독립된 모듈들을 말한다. 컴포넌트를 기반으로 하는 프로그래밍에서는 블록을 조립하듯 화면을 구성하게 되는데, 웹 컴포넌트는 이를 웹에서 적용할 수 있도록 정한 것이다. React는 컴포넌트 기반의 구조라는 특징을 갖는데, 페이지를 컴포넌트로 구성하고, 하나의 컴포넌트가 다른 여러 개의 컴포넌트 조합으로 구성될 수 있다. 개발자는 컴포넌트를 활용해 사용되는 전체 코드의 양을 줄일 수 있고, 개발 시간을 단축할 수 있으며, 유지 보수 비용을 줄일 수 있다.

 

◆ useState hook

 

useState는 컴포넌트에 state 변수를 추가할 수 있는 React Hook이다. 먼저 컴포넌트의 최상위 레벨에서 useState를 호출하여 변수를 선언한다. 이때 구조 분해 할당을 통해 [name, setName] 처럼 변수의 이름을 지정하면 된다. 지난 JS 문법 강의에서 구조 분해 할당은 React에서 활용하게 되니 기억해 놓아야 한다는 말이 떠올랐다.

import { useState } from 'react';

const [state, setState] = useState(initialState)

 

(initialState)에는 state의 초기값이 들어간다. 숫자, 문자열, boolean 등 어떤 유형의 값이라도 저장할 수 있다. useState는 처음에는 initialState와 일치한 값을 가지는 배열을 반환하면서, state를 다른 값으로 업데이트 할 수 있다. 단, 반복문이나 조건문 안에서는 useState를 호출할 수 없으므로 필요에 따라 새 컴포넌트 안으로 state를 옮겨 주어야 한다.

 

// 컴포넌트 안에서 useState 활용해보기
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      You pressed me {count} times
    </button>
  );
}

 

질문 & 더 알아보기

: 복습. 구조 분해 할당?

JS에서 자료를 구성할 때 객체와 배열을 이용한다. key-value로 이루어진 데이터를 저장할 때 객체, 데이터를 순서대로 저장할 때 배열을 택하면 된다. 그런데 때로는 함수에 객체나 배열을 전달하고 싶을 수 있다. 또는 저장된 전체 데이터가 아닌 개중 일부만 필요할 수도 있다. 이를 위해 객체와 배열을 변수로 분해하는 구조분해할당(destructuring)을 사용하게 된다.

// 이름과 성을 요소로 가진 배열
let arr = ["Bora", "Lee"]

// firstName엔 arr[0]을, surname엔 arr[1]을 할당한다.
let [firstName, surname] = arr;

alert(firstName); // 결과: Bora
alert(surname);  // 결과: Lee

 

이런 방식을 통해 변수로 원하는 값을 사용할 수 있다. 또는 배열 앞에 위치한 몇 개의 값만을 가져오고, 나머지는 따로 모아 저장할 수 있다. 이럴 때는 '...'를 붙인 매개변수 하나를 추가하면 나머지 요소를 가져올 수 있다!

 

 

 

리액트 공식 홈페이지에서 다양한 기능과 hook을 상세히 살펴보고 공부하자.

React Reference Overview – React