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

Props의 사용

props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용하는 방법입니다. HTML의 속성(attribute)처럼 작성하지만, 문자열뿐만 아니라 객체, 배열, 함수 등 자바스크립트의 모든 값을 전달할 수 있습니다. props는 자식 컴포넌트에서 함수의 매개변수처럼 받아올 수 있으며, 구조 분해 할당을 활용하면 더 간결하게 작성할 수 있습니다.
컴포넌트 태그 사이에 있는 내용을 전달하고 싶을 때는 children이라는 특수한 props를 사용합니다. 타입스크립트 환경에서는 React.FC, React.ReactNode 같은 리액트 전용 타입을 함께 활용합니다.

// 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>
      <p>오늘의 날씨는 {weather}입니다.</p>
    </div>
  );
};

export default Props;

// App.tsx
function App() {
  return (
    <div className="App">
      <Props weather="맑음">날씨 예보</Props>
    </div>
  );
}

앞으로 공부 방향

프론트엔드 기초를 마치며 강사님이 강조하신 앞으로의 공부 방향을 정리해보겠습니다.
1. 클론 코딩 위주의 학습보다는 프로그래밍 기초 개념과 원리를 이해하는 것을 중심으로 공부하는 것이 중요합니다.

2. 개발은 기술 하나하나를 습득하는 것보다 그 이면에 있는 패턴을 이해하는 것이 더 중요하며, 패턴을 익혀두면 새로운 기술을 접할 때도 빠르게 적응할 수 있습니다.

3. HTML, CSS 같은 UI 디자인도 중요하지만, 그보다는 로직과 기능 구현에 집중하는 것이 프론트엔드 개발자로서의 핵심 역량입니다.

4. 또한 모든 분야의 개발 기반은 대부분 객체지향이기 때문에 객체지향 철학에 꾸준히 관심을 가지는 것이 좋습니다.

5. 최종적으로 우리의 목표는 프론트엔드 개발자나 웹 개발자가 아닌, 그냥 개발자가 되는 것입니다.