Work Life

props 란?

properties의 약자로 컴포넌트를 사용하게 될때 특정 값을 전달하고 싶을때 사용한다.이를 통해 React 애플리케이션은 데이터의 단방향 흐름을 유지하면서 구조화된 방식으로 컴포넌트를 조합 할수 있다.

예제를 통해 설명하겠다

// ToDoList.js
import React from 'react';
import ToDoItem from './ToDoItem';

const ToDoList = () => {
  // 할일 목록 데이터
  const toDos = [
    { id: 1, text: 'React 공부하기' },
    { id: 2, text: '컴포넌트 만들기' },
    { id: 3, text: 'props 사용하기' }
  ];

  return (
    <div>
      <h2>To Do List</h2>
      <ul>
        {toDos.map(todo => (
          // ToDoItem 컴포넌트에 props로 데이터를 전달
          <ToDoItem key={todo.id} text={todo.text} />
        ))}
      </ul>
    </div>
  );
};

export default ToDoList;

import React from 'react';

const ToDoItem = (props) => {
  return (
    <li>{props.text}</li>
  );
};

export default ToDoItem;

ToDoList 컴포넌트는 toDos 배열을 가지고 있다. 이 배열은 할일 항목을 나타내고 map 함수를 사용하여 각 할일 항목에 대해 ToDoItem 컴포넌트를 생성하고, ToDoItem 컴포넌트에는 text라는 prop을 전달한다.

ToDoItem 컴포넌트에서는 props를 매개변수로 받아와서 해당 prop을 사용하여 할일 항목의 텍스트를 렌더링한다.

위같은 방법으로 부모 컴포넌트인 ToDoList가 할일 목록 데이터를 갖고 있고, 이 데이터를 props로 전달하여 자식 컴포넌트인 ToDoItem이 화면에 각각의 할일 항목을 렌더링한다.

만약 비구조화 할당을 통해 props의 text를 전달 받기를 원한다면 아래와 같이 사용하면 된다.

실제로 비구조화 할당을 사용하여 값을 가져오는경우가 더 많다.

import React from 'react';

const ToDoItem = ({text}) => {
  return (
    <li>{text}</li>
  );
};

export default ToDoItem;

useState를 설명하기에 앞서 먼저 Hook에 대해서 설명하겠다.

React 공식문서에서 아래와같은 내용을 확인 할 수 있다.

위의 내용처럼 useState는 Hook API 중 하나이고 React 16.8 이상에서 사용할 수 있으며  Class안에서는 동작하지 않는다.이 점을 꼭 유의해서 사용하도록 하자.

이제 본격적으로 useState에 대해서 설명하겠다.

useState는 함수형 컴포넌트에서 상태(state)를 관리하기 위해 사용되고 이를 이용해 상태를 추가하고 해당 상태를 업데이트할 수 있다.

useState 사용법

useState를 사용하기 위해선 우선 import 하고 상태를 선언하고 해당 상태와 해당 상태를 업데이트할 함수를 가져와야 한다. 아래의 예제를 보자.

import React, { useState } from 'react';

function Example() {
  // useState를 사용하여 count 상태와 setCount 함수를 선언
  const [count, setCount] = useState(0);

  // count를 업데이트하는 함수
  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Increase Count</button>
    </div>
  );
}

export default Example;

useState(0)은 초기값이 0인 count라는 상태를 생성한다. setCount는 count 상태를 업데이트하는 함수다. 이 함수를 호출하면 리액트는 컴포넌트를 다시 렌더링한다.

incrementCount 함수는 버튼을 클릭할 때마다 count 상태를 증가시키는 역할을 한다. 이 함수는 setCount를 호출하여 count 상태를 이전 값에서 1씩 증가시킨다.

useState 훅은 단일 상태 뿐만 아니라 객체나 배열과 같은 복잡한 데이터 구조를 관리할 수도 있다. 이를 통해 여러 개의 상태를 한 번에 처리할 수 있다. 이러한 방식으로, 함수형 컴포넌트에서도 상태를 효과적으로 관리할 수 있다

useState의 대괄호는 무슨 역할인가?

const [fruit, setFruit] = useState('banana');

대괄호 안의 내용을 기본값이다. 'setFruit'로 값을 넣지 않는이상 'fruit'는 'banana' 인 것이다.

객체도 가능한가?

const [userList,setUserList] = useState({
	username : 'Hong gil dong',
  	email : 'gildong00@example.com'
})

위와 같은 형태로도 사용이 가능하며 모든 속성을 업데이트 해야 할때 유용하다. 사용할때는 조금 편리하게 하기 위해 아래처럼 구조분해 할당을 하면된다.

const [userList,setUserList] = useState({
	username : 'Hong gil dong',
  	email : 'gildong00@example.com'
})

const [username,email] = userList;

위처럼 useState기능이 추가되고서 함수형 컴포넌트를 사용하던 중 state를 추가하고 싶을 때 클래스 컴포넌트로 바꿔야 할일은 사라졌고 함수형 컴포넌트 안에서 useState를 활용하여 추가 및 관리 할 수 있게 됐다.

useState의 좀더 본격적인 활용과 Hook 규칙에 대해서는 useEffect를 하며 좀더 자세하게 설명하겠다. 

모르겠으면 아래의 React 공식 문서를 꼭 보자.

https://react.dev/reference/react/useState

React에서의 조건부 렌더링이란?

조건부 렌더링은 어떤 조건에 따라 다른 컴포넌트나 요소를 렌더링하는 것을 의미한다. 

React 에서의 조건부 렌더링은 보통 삼항연사자를 이용해서 구현된다. 아래의 예제를 보자

import React from 'react';

function App ({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? (
        <p>Welcome, user!</p>
      ) : (
        <p>Please log in</p>
      )}
    </div>
  );
}

export default App;

isLoggedIn이 true이면 "Welcome, user!"가 출력되고, false이면 "Please log in"이 출력되는 간단한 예제이다.

여러 조건이 필요한 경우는 아래처럼 &&을 이용하여 나타낼수도 있다.

import React from 'react';

function App({ isLoggedIn, isAdmin }) {
  return (
    <div>
      {isLoggedIn && isAdmin ? (
        <p>Welcome, admin user!</p>
      ) : isLoggedIn ? (
        <p>Welcome, regular user!</p>
      ) : (
        <p>Please log in</p>
      )}
    </div>
  );
}

export default App;

isLoggedIn과 isAdmin을 사용하여 조건에 따라 서로 다른 메세지를 출력하는 예제이다.

위의 예제는 삼항연산자를 사용했지만 if 문 등을 이용해서 여러 조건에 따라 다른 UI를 렌더링하기 위해 사용 할 수 있으니 많이 만들어보고 익히도록 하자.

꽤 많은 개발자들이 기초가 단단하지 않은 상태에서 새로운것을 학습하며 곁가지를 넓혀간다.

그러면서 밑바닥이 드러나고 직업에 대해 다시 생각해보며 회의감을 느낀다. 그리고 새로운것을 거부한다.

이러한 두려움을 없애기위해 다시 기초를 다지려한다.

React 의 기본 문법부터 활용 그에 따른 예시를 함께 올릴 예정이다. 아래의 링크들은 계속 업데이트 될꺼고 해당 내용을 참고하면 된다.

2024.03.31 - [Develop/React] - [React] Props 란 무엇인가 ? 사용방법은?