Components and Props

tintwo·2022년 12월 13일

React

[InfLearn] 처음 만난 React

목록 보기

6/19

React의 Components

react는 component로 구성되어 있고, components는 또 다른 component로 구성될 수 있다.

블록을 조립하듯, 컴포넌트를 모아서 새로운 components를 만들 수 있다.

작은 component들이 모여 component를 구성하고 또 그 component가 모여 하나의 페이지를 구성한다.

개념적으로 JS의 함수와 비슷하다.

입력을 받고 출력을 한다.

리액트 컴포넌트가 하는 역할은, 어떠한 속성들을 입력받고, 그에 맞는 리액트 엘리먼트 리턴

객체지향 까지는 아니지만 비슷한 개념

component는 class (뭔가 찍어내는 틀)
elements는 instance (결과물)

그럼 param으로 들어가는 Props 란?

Props는 properties의 줄임말, 붕어빵에 들어가는 재료가 바로 props
같은 react component에서 눈에 보이는 글자나 색 등의 속성을 바꿀 때 사용한다.

컴포넌트에 전달 할 다양한 정보를 담고 있는 JS 객체 -> Props

출처 https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8/unit/113268?category=questionDetail

Props의 특징

Read-Only, 값을 변경 할 수 없다.
모든 리액트 컴포넌트는 Props를 직접 바꿀 수 없고,
같은 Props에 대해서는 항상 같은 결과(elements)를 보여줘야 한다.
즉, pure해야 한다.

Props 사용법

App 컴포넌트안에서 profile 컴포넌트를 사용중이고, props는 키:값 형태로 넘겨준다.

문자열 이외에 정수, 변수, 다른 컴포넌트가 들어간다면 { } 중괄호를 써서 감싸줘야 한다.

컴포넌트도 props에 넣을 수 있다.

Component 만들기

function 컴포넌트와 class 컴포넌트가 있고,
Component를 만들 때 이름은 항상 대문자로 시작해야 Component로 인식한다.

Component 렌더링

component로 부터 element를 만들어 렌더링 해야 화면에 나타낼 수 있다.

// DOM 태그를 사용한 element
const element = <div />;

// 사용자가 정의한 Component를 사용한 element
function Welcome(props){ // 함수 컴포넌트 선언
	return <h1>hello, {props.name}</h1> 
}

const element = <Welcome name="인제" /> 
ReactDOM.render(
	element, // element를 파라미터로 render() 함수 호출 
    document.getElementById('root)
);

Component 합성

function Welcome(props){ 
	return <h1>hello, {props.name}</h1> 
}

function App(props) { // Welcome 컴포넌트 3개가 합쳐져 있음
	return(
    	<div>
        	<Welcome name="Mike" />
            <Welcome name="Steve" />
            <Welcome name="Jane" />
        </div>
    )
}

ReactDOM.render(
	<App />
    document.getElementById('root')
);