Props

다들 알다싶이 리액트는 컴포넌트 기반이다.

근데 나는 빡대가리 그런지 Props의 개념을 다시 정리하고자 한다.

 

컴포넌트들이 모여서 하나의 컴포넌트를 구성하고, 또 이러한 컴포넌트들이 모여서 전체 페이지를 구성한다.

리액트 컴포넌트에서 입력은 Props고, 출력은 리액트 엘리먼트다.

리액트 컴포넌트의 역할은 어떠한 속성들을 입력으로 받아서 그에 맞는 리액트 엘리먼트를 생성하여 리턴해 주는 것이다.

그러니까, 컴포넌트는 만들고자 하는대로 Props(속성) 를 넣으면 해당 속성에 맞춰 화면에 나타날 엘리먼트를 만들어 주는 것임.

이것은 마치 붕어빵을 굽는 과정과 비슷하무니다.

 

겨울이니까 붕어빵 먹고 싶다. 팥붕? 슈붕? 댓글로 의견 좀.

 

붕어빵 파는 곳 가 보면 붕어빵을 만드는 기계가 있습니다.

붕어빵 기계는 붕어 모양의 틀이 여러 개 있고, 거기에 반죽을 부어서 붕어빵을 만듭니다.

이것은 리액트 컴포넌트로부터 엘리먼트가 만들어지는 과정과 비슷합니다.

 

리액트 컴포넌트 = 붕어빵 틀

각 붕어빵 친구들 = 리액트 엘리먼트

붕어빵에 들어가는 재료들 = Props

 

이 과정은 객체지향 개념에서 나오는 클래스와 인스턴스의 개념과 비슷하지요.

 

붕어빵 틀만 있으면 계속해서 붕어빵을 만들어낼 수 있는 것임.

 

1. Props의 개념

• 리액트 컴포넌트에서 눈에 보이는 글자나 색깔 등의 속성을 바꾸고 싶을 때 사용하는 컴포넌트 속 재료라고 생각하면 됨.
• 컴포넌트에서 전달할 다양한 정보를 담고 있는 자바스크립트 객체임.

2. Props의 특징

• 읽기 전용 (Read-Only)
• 순수함수 (pure function)
  모든 리액트 컴포넌트는 Props 를 직접 바꿀 수 없고, 같은 Props 에 대해서는 항상 같은 결과를 보여 줘라.

3. Props 사용법

• 컴포넌트에 키-값 쌍 형태로 넣음.

function App(props) {
  return (
      <Profile
          name="큐"
          introduction="안녕하세요, 더보이즈 큐입니다."
          viewCount={19981105}
      />
  );
}

 

App 컴포넌트  > Profile 컴포넌트 > name, introduction, viewCount 라는 세가지 속성이 있음 > 속성의 값이 모두 Profile 컴포넌트에 props 로 전달됨

 

{
	name: "지창민",
    	introduction: "안녕하세요, 더보이즈 큐입니다.",
    	viewCount: 19981105
}

 

중괄호를 사용하면 무조건 자바스크립트 코드가 들어간다.

props에 값을 넣을 때도 문자열 이외에 정수, 변수, 그리고 다른 컴포넌트 등이 들어갈 경우에는 중괄호를 사용해서 감싸 주어야 함.

물론~ 문자열을 중괄호로 감싸도 상관 없음!

 

function App(props) {
    return(
    	<Layout
        width={2560}
            height={1440}
            header={
            	<header title="리액트 짱이 될 거예요." />
            }
            footer={
            	<Footer />
            }
        />
    )
}

 

중괄호를 사용하게 되면 위와 같이 props 의 값으로 컴포넌트를 넣을 수 있음.