오늘 해야 할 것

CS스터디 책 키워드 정리
디테일 페이지 만듬
공통IP 연결?

오늘 공부 한 것

props(property)란?

어디에도 있지만 어딘가에 연결되는것. 부모가 어딘가에 있으니 무서워 말고 props.객체를 읽어보자.

1. 프로퍼티(props)란?

• 프로퍼티, props라고 한다.
• 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용한다.(단방향 데이터 흐름 갖는다.)
• 프로퍼티는 수정할 수 없다는 특징이 있다.(자식입장에선 읽기 전용인 데이터이다.)

2. 사용방법?

• 프로퍼티에 문자열을 전달할 때는 큰따옴표("")를, 문자열 외의 값을 전달할 때는 중괄호({})를 사용한다.

2개의 프로퍼티 넘기기

App.js

import Main from './component/Main';

function App(){
	return(
		<div>
			<Main name="강형원" color="blue"/>
		<div>
	);
}

Main.js

import React from 'react';

function Main(props){
	return(
    	<div>
        	<main>
            	<h1 style={{color:props.color}}>안녕하세요. {props.name}입니다.</h1>
            </main>
        </div>
    );
}

4. 프로퍼티 기본값 설정 및 필수값 설정

1) 기본값 설정

Main.js (name 프로퍼티가 없는 경우, 'Default'라는 값을 사용하게 처리

import React from 'react';

function Main({name, color}){
	return(
    	<div>
        	<main>
            	<h1 style={{color}}>안녕하세요. {name} 입니다.</h1>
            </main>
        </div>
    );
 }
 
 Main.defaulProps = {
 	name: 'Default'
 }
 
 export default Main;

App.js

import React, {Component} from 'react';
import Header from './component/Header';
import Footer from './component/Footer';
import Main from './component/Main';

function App(){
	return (
   	<div>
       	<Header />
           	<Main color='blue'/>
           <Footer />
       </div>
   )
}

export default App;

6.props.children 활용하기

• children을 사용하여 내부에 있는 내용을 표현할 수 있다.

  Wrapper.js

import React from 'react';
import Main from './Main';
 
 function Wrapper(props){
 	const style = {
    	backgroundColor: 'yellow',
    };
    
    return (
    	<div style={style} />
 	);
}

export default Wrapper;

-기존에 사용하고 있던 Main 컴포넌트를 감싸보자. 메인 컴포넌트가 보이지 않게된다.

App.js

import React, {Component} from 'react';
import Header from './Header';
import Footer from './Footer';
import Main from './component/Main';
import Wrapper from './component/Wrapper';

function App() {
	return (
    	<div>
        	<Header />
            	<Wrapper>
                	<Main color='blue'/>
                </ Wrapper>
            <Footer />
        </div>
    );
}

export default App;

-Wrapper컴포넌트에서 this.children을 렌더링 해보자.

import React from 'react';

function Wrapper(props) {
	const style = {
    	backgroundColor: 'yellow',
    }
    
    return (
    	<div style={style}>
        	{props.children}
        </div>
    );
}

export default Wrapper;

-여러개의 자식을 사용할 수도 있다.
App.js

import React, { Component } from 'react';
import Header from './component/Header';
import Footer from './component/Footer';
import Main from './component/Main';
import Wrapper from './component/Wrapper';

function App() {
	return (
		<div>
		<Header />
		<Wrapper>
			<Main name="강형원" color="blue"/>
			<Main name="넘버원" color="black"/>
		</Wrapper>
		<Footer />
	</div>
	);
}

export default App;