프라퍼티(Props)

프라퍼티(Props)

- properties 의 줄임말으로써 컴포넌트 속성을 설정할 때 사용하는 요소 
- props의 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정가능 


props 지정해주기   

- props 지정해주기전. 부모 컴포넌트는 App 컴포넌트이다

// Mycomponenet.js

const MyComponent = () => {
    return <div>나의 첫 컴포넌트</div> 
}
export default MyComponent;

// App.js

import MyComponent from './MyComponent'; 
const App = () => {
    return <MyComponent/>;
};  
export default App;

step 1. JSX내부에서 props 렌더링 

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

step 2. 컴포넌트를 사용할 때 props값 지정하기 

import MyComponent from './MyComponent'; 

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

export default App;

propes값 기본값 설정: defaultProps 

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

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

export default MyComponent;

 

// App.js

import MyComponent from './MyComponent';  
const App = () => {
    return <MyComponent />;
}; 
export default App;

 

- 기본 default값이 있는 상태에서 name 설정을 따로 하면은 name 설정을 따로 한 값으로 덮어 씌어진다

//App.js

import MyComponent from './MyComponent'; 

const App = () => {
    return <MyComponent name="좋은하루"/>;
};

export default App;

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

// MyComponent.js

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

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

export default MyComponent;

// App.js

import MyComponent from './MyComponent'; 

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

MyComponent태그사이를 비워둔다면?!

 
비구조화 할당 문법을 통해 porops값 내부 값 추출하기 
- 위와 같은 결과를 얻는다 

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;

===========================================

protoTYpes를 props 검증 
- 컴포넌트 필수 props을 지정하거나 props의 타입을 지정할 떄는 propTypes을 사용합니다. 
컴포넌트의 porpsTYpe을 지정하는 방법은 defaultPRorp을설정하는거소가 빗ㅅ 

import PropTypes from 'prop-types'; 

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

Mycomponent.defaultProps = {
    name : "기본 이름"
}; 


// name값은 항상 문자열로 지정한다 
Mycomponent.propTypes = {
    name : PropTypes.string
} 
export default Mycomponent;


만약에 name값을 문자가 아닌 숫자로 지정했다면?!

App.js


import MyComponent from './MyComponent'; 

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

export default App; 

사진5  

===========================================
IsRequired 를 사용하여 필수 prototype설정 

- propTypes를 지정하지 않을때 경고 메시지를 띄어주는 작업 
- proTypes를 지저알 떄 뒤에 isRequired를 붙여 주면 됨 

//  favoriteNumber라는 숫자를 필수 props로 지정해보자 


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;

App.js 

import MyComponent from './MyComponent'; 

const App = () => {
   return <MyComponent name="조연아" favoriteNumber={1}>리액트</MyComponent>
}; 
export default App;