[Week10] 프론트엔드 기초: React + TypeScript(10)

지난 시간에 이어 리액트 컴포넌트 사이에 데이터를 전달하는 props 에 대해 알아보고, 프론트엔드의 기초를 마무리해 볼게요.

props

리액트의 컴포넌트는 props 를 통해 서로 데이터를 주고받아요. 모든 부모 컴포넌트는 props 를 통해 자식 컴포넌트 방향으로 데이터를 전달해 줄 수 있어요.

props 는 HTML의 속성(attribute)처럼 작성해서 사용하지만, 문자열뿐만 아니라 객체, 배열, 함수 등 자바스크립트의 다양한 값을 전달할 수 있어요.

// Props.tsx
import React from "react";

interface IProps {
  weather: string;
  children: React.ReactNode;
}

const Props: React.FC<IProps> = ({ children, weather }) => {
  // const { children, weather } = props; 와 같이 구조분해할당을 사용할 수 있어요.

  return (
    <div>
      <h2>{children}</h2>
      today's weather is {weather}.
    </div>
  );
};

export default Props;

// App.tsx
function App() {
  return (
    <div className="App">
      <Props weather="sunny">Weather Forecast</Props>
    </div>
  );
}

위 코드는 함수형 컴포넌트를 사용해 props 를 구현한 예시예요. 자식 컴포넌트에서는 props 를 함수의 매개변수처럼 받아올 수 있고, 구조분해할당을 활용하면 코드를 더 깔끔하게 작성할 수 있어요.

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때는 HTML의 속성처럼 이름을 적고 값을 넘겨주면 돼요. 컴포넌트 태그 사이에 있는 내부 요소나 텍스트를 넘겨주고 싶을 때는 children 이라는 특수한 속성을 통해 값을 전달받을 수 있어요.

참고로 리액트 환경에서 타입스크립트를 원활하게 사용하려면, React.FC 나 React.ReactNode 같은 리액트 전용 타입들을 미리 알아두는 것이 좋아요.

앞으로의 공부 방향

프론트엔드 기초를 마치며 앞으로 가져가야 할 공부 방향을 정리해 보았어요.

• 프로그래밍 기초 개념 및 원리 이해 중심 학습
• 기술보다는 패턴의 이해 및 학습: 다양한 기술들이 존재하지만 그 이면에는 공통적인 패턴이 있어요. 패턴을 익혀두면 새로운 기술을 배울 때 기존 지식을 쉽게 접목시킬 수 있어요.
• HTML, CSS 보다 로직과 기능 구현에 집중: 프론트엔드 개발자는 UI 요소를 만들기도 하지만, 기본적으로 복잡한 로직과 기능을 올바르게 구현하는 것이 주된 목적이에요.
• 객체지향 철학: 프론트엔드를 포함해 다양한 개발 영역에서 객체지향 원리가 널리 활용되고 있기 때문에 이를 이해하는 것이 중요해요.
• 특정 분야에 얽매이지 않는 개발자 되기: 프론트엔드와 백엔드는 직무를 나누는 기준일 뿐이에요. 세부적인 기술 스택도 중요하지만, 전체적인 흐름을 볼 줄 아는 개발자가 되는 것을 목표로 해야 해요.