컴포넌트-props

So'sCode·2022년 2월 24일
React리액트리액트를 다루는 기술컴포넌트
0

React

목록 보기
3/5
post-thumbnail

💡 1. 클래스형 컴포넌트

컴포넌트 선언하는 방식

  • 함수 컴포넌트
  • 클래스형 컴포넌트
//클래스형 컴포넌트
import React, {Component} from 'react';

class App extends Component {
	render() {
    	const name = 'react';
        return <div className = "react"> {name} </div>
	}
}
export default App;

클래스형 컴포넌트 와 함수 컴포넌트의 차이

  • 클래스형 컴포넌트 : state 기능 및 라이프 사이클 기능 사용가능, 임의 메서드를 정의할 수 있다.

📖 2. 첫 컴포넌트 생성

//함수 컴포넌트
const MyComponenet = () => {
	return <div>나의 새롭고 멋진 컴포넌트 </div>;
};
export default MyComponent;

2.1 모듈 내보내기 및 불러오기

  1. 모듈 내보내기 (export)
export default MyComponent;

이 코드는 다른파일에서 이 파일을 import할 때, 위에서 선언한 MyComponent 클래스를 불러오도록 설정한다.

  1. 모듈 불러오기(import)
    App컴포넌트에서 MyComponent 컴포넌트를 불러와서 사용한다.
import MyComponent from './MyComponent';

const App = () => {
	return <MyComponent />;
};
export default App

🔐 3. props

props는 properties 를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다.
props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다.

*컴포넌트 : 앱을 이루는 최소한의 단위

3.1 JSX 내부에서 props 렌더링

해당 컴포넌트에서 name 이라는 props를 렌더링하도록 설정하고자한다. props값은 컴포넌트 함수의 파라미터로 받아 사용할 수 있다. props를 렌더링할 때 JSX내부에서 { } 기호로 감싸 주면된다.

const MyComponent = props => {
	return <div> 안녕하세요, 제이름은 {props.name} 입니다.</div>;
};

export default MyComponent;

3.2 컴포넌트를 사용할 때 props 값 지정하기

import MyComponent from './MyComponent';

const App = () => {
	return <MyComponent name = "React" />;
};

export default App;

3.3 props 기본값 설정 : defaultProps

defaultProps : props 값을 따로 지정하지 않았을 때 보여 줄 기본값을 설정하는 것.

//설정 방법
const MyComponent = props => {
	return <div> 안녕하세요, 제 이름은 {props.name}입니다. </div>;
};
MyComponent.defaultProps = {
	name : '기본 이름'
};
export default MyComponent;

출력 값 : 안녕하세요, 제 이름은 기본 이름 입니다.

3.4 태그 사이의 내용을 보여 주는 children

children : 리액트 컴포넌트를 사용할 때 컴포넌트 태그 사이의 내용을 보여주는 props이다.

//App.js
import MyComponent from './MyComponent';

const App = () => {
	return <MyComponent>리액트</MyComponent>;
};
export default App;

위의 코드에서 MyComponent 태그 사이의 '리액트'라는 문자를 MyComponent 내부에서 보여주기 위해선 props.children 값을 보여 주어야한다.

//MyComponent.js
const MyComponent = props => {
	return (
    	<div>
        안녕하세요, 제 이름은 {props.name}입니다. <br/>
        children 값은 {props.children}
        입니다.
        </div>
	);
};

MyComponent.defaultProps = {
	name : '기본 이름'
};

export default MyComponent;

출력 값 : 안녕하세요, 제 이름은 기본 이름 입니다.
children 값은 리액트 입니다.

3.5 비구조화 할당 문법을 통해 props 내부 값 추출하기

현재 MyComponent에서 props 값을 조회할 떄마다 props.name, props.children과 같이 props. 이라는 키워드를 앞에 붙이고 있다. Es6의 비구조화 할당 문법을 사용하여 내부 값을 바로 추출하는 방법

//MyComponent.js
const MyComponent = props => {
	const {name , children } = props;
    return {
    	<div>
        	안녕하세요, 제이름은 {name} 입니다.<br/>
            children 값은 {children}
            입니다.
        </div>
	);
};
MyComponent.defaultProps = {
	name = '기본 이름'
};

export default MyComponent;

이렇게 객체에서 값을 추출하는 문법을 비구조화 할당이라고 부른다. (= 구조 분해 문법)
만약, 함수의 파라미터가 객체라면 그 값을 바로 비구조화 해서 사용하는 것이다.

const MyComponent = ({name,children}) => {
	return (
    	<div> 
        	안녕하세요, 제이름은 {name} 입니다.<br/>
            children 값은 {children}
            입니다.
		</div>
	);
};

MyComponent.defaultProps = {
	name : '기본 이름'
};

export default MyComponent;

3.6 propTypes를 통한 props 검증

컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 때는 propTypes를 사용합니다. 이를 지정하는 방법은 앞에서 보았던defaultProp를 설정하는 것과 유사하다. 

//MyComponent.js
import PropTypes from 'prop-types'; 
//propTypes를 사용하려면 코드 상단에 import 구문을 사용하여 불러와야한다.
const MyComponent = ({name,children}) => {
	return (
    	<div> 
        	안녕하세요, 제이름은 {name} 입니다.<br/>
            children 값은 {children}
            입니다.
		</div>
	);
};
MyComponent.defaultProps = {
	name : '기본 이름'
};

MyComponent.propTypes = {
	name : PropTypes.string
};

export default MyComponent;

이렇게 된다면 PropType.string에 의해서 무조건 문자열로 전달해야한다는것을 의미한다. 

import MyComponent from './MyComponent';

const App = () => {
	return <MyComponent name = {3}> 리액트 </MyComponent>;
};

export default App;

위의 코드처럼 name = 3 이라고 문자열이 아닌 숫자로 입력시 출력은되긴하지만 Console 탭에 오류가 난다. 

//이렇게 수정!
import MyComponent from './MyComponent';

const App = () => {
	return <MyComponent name = "React"> 리액트 </MyComponent>;
};
export default App;

3.6.1. isRequired를 사용하여 필수 propTypes 설정
isRequired : propTypes를 지정하지 않았을 때 경고 메시지를 띄운다.

import PropTypes from 'prop-types';

const MyComponent = ({name,favoriteNumber,children}) => {
	return(
    	<div>
        안녕하세요, 제 이름은 {name}입니다. <br/>
        children 값은 {children}
        입니다.
        <br/>
        제가 좋아하는 숫자는 {favoriteNumber} 입니다.
        </div>
	);
};

MyComponent.defaultProps = {
	name : '기본 이름'
};

MyComponent.propTypes = {
	name : PropTypes.string,
    favoriteNumber : PropTypes.number.isRequired
};

export default MyComponent;

위의 코드에서 favoriteNumber : PropTypes.number.isRequired 가 존재하지만 favoriteNumber 값이 정해지지 않았기 때문에 경고가 발생한다.

//App.js
import Mycomponent from './MyComponent';

const App = () => {
	return (
    	<MyComponent name = "React" favoriteNumber = {1}>
        	리액트
		</MyComponent>
	);
};

export default App;

위의 코드처럼 favortieNumber값을 MyComponent에게 전달하면 위에서생기던 경고가 발생하지 않는다.

3.7 클래스형 컴포넌트에서 props 사용하기

클래스형 컴포넌트에서 props를 사용할 때는 render 함수에서 this.props를 조회하면된다. defaultPros 와 propTypes는 같은 방식으로 적용하면된다.

//MyComponent.js (클래스형)
import React, { Component } from 'react';
import PropTypes from 'prop-types';

class MyComponent extends Component {
	render() {
    	const { name, favoriteNumber, children } = this.props; 
        // 비구조화 할당
        return (
        	<div>
            안녕하세요, 제 이름은 {name}입니다. <br/>
            children 값은 {children}
            입니다.
            <br/>
            제가 좋아하는 숫자는 {favoriteNumber}입니다.
            </div>
		);
	}
}
MyComponent.defaultProps = {
	name : '기본 이름'
};

MyComponent.propTypes = { 
	name : PropTypes.string,
    favoriteNumber : PropTyes.number.isRequired
};
export default myComponent;

클래스형 컴포넌트에서 defaultProps와 propTypes 를 설정할 때 class 내부에서 지정하는 방법도 존재한다. 

//MyComponent.js
import React, {component} from 'react';
import PropTypes from 'prop-types';

class MyComponent extends Component {
	static defaultProps = {
    	name : '기본 이름'
};
static propTypes = {
	name : PropTypes.string,
    favoriteNumber : PropTypes.number.isRequired
};
render() {
	const {name, favoriteNumber,children } = this.props; 
    //비구조화 할당
    return (
    		<div>
            안녕하세요, 제 이름은 {name}입니다. <br/>
            children 값은 {children}
            입니다.
            <br/>
            제가 좋아하는 숫자는 {favoriteNumber}입니다.
            </div>
          );
	}
}
export default MyComponent;

🔑 4. state

profile
So'sCode
이왕하는거미루지말고하자.
이전 포스트

JSX

다음 포스트

컴포넌트 - state

0개의 댓글

관련 채용 정보