프로그래머스 데브코스 55일차 with. TS 웹 풀스택

📚요약

지난 시간에 이어 리액트의 컴포넌트 사이에 데이터를 전달하는 props를 배우고 프론트엔드의 기초를 마무리하겠습니다.

 

📖리액트

📄props

리액트의 컴포넌트는 props를 통해 서로 의사 소통합니다. 다른 말로 얘기해 props를 통해 데이터를 주고받는다는 의미입니다. 모든 부모 컴포넌트는 props를 통해 자식에게 데이터를 전달해 줄 수 있습니다.

props는 HTML의 attribute(속성)처럼 사용하지만 객체, 배열, 함수를 포함한 JS의 값을 전달할 수 있습니다.

// Props.tsx
import React, { Component } 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를 함수의 매개변수처럼 작성해 받아올 수 있고, 구조분해할당 또한 사용할 수 있습니다. 부모 컴포넌트에서 자식 컴포넌트의 props에 전달해 주기 위해서는 HTML의 속성처럼 사용하고 값을 넘겨주면 됩니다. 내부 HTML을 넘겨주고 싶다면 children을 통해 값을 넘겨줄 수 있습니다.

🍯tip! 리액트에서 TS를 사용하기 위해서는 리액트의 타입을 알면 좋다. 해당 내용은 다음 블로그를 확인해 보면 좋을 것 같다.

 

클래스형 컴포넌트를 사용했을 때 props 구현 코드입니다.

import React, { Component } from "react";

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

class Props extends Component<IProps> {
  render() {
    const { children, weather } = this.props;
    return (
      <div>
        <h2>{children}</h2>
        today's weather is {weather}.
      </div>
    );
  }
}

export default Props;

 

📖앞으로의 공부 방향

• 프로그래밍 기초 개념 및 원리 이해 중심 학습
• 기술보다는 패턴의 이해 및 학습
  : 여러 기술들이 있지만 해당 기술들은 어떠한 패턴을 가지고 있기 때문에 패턴을 익히면 새로운 기술을 배울 때 배웠던 것을 접목시킬 수 있다.
• HTML, CSS 보다 로직과 기능 구현에 집중
  : 프론트엔드 개발자는 HTML, CSS로 UI 요소를 개발하기도 하지만 기본적으로 로직과 기능 구현이 목적이다.
• 객체지향 철학
  : 다양한 곳에서 객체지향이 활용되고 있기 때문이다.
• 프론트엔드 개발자나 백엔드 개발자가 아닌 개발자 되기
  : 프론트엔드나 백엔드는 직무로 나뉘는 거지 세세한 것도 좋지만 크게 보고 개발자가 되는 것을 목표로 하자.

 

다음 시간에 계속...

 

출처 & 참고

이창현 강사님의 강의

Passing Props to a Component, 리액트 공식 사이트, 2024.06.21