[ React ] Component & Props

Component

Component는 "Props"라는 임의의 입력을 받은 후, React Element를 반환한다. 

Component는 function Component와 Class Component 두 가지 유형으로 나뉜다. 

function Component를 정의하는 가장 간단한 방법은 Javascript 함수를 작성하는 것이다. 

class Component는 'extends React.Componet'와 render()가 포함되어야 한다. 

 

Function Component

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

 

Class Component

class Welcome extends React.Component{
	render(){
    	return <h1>Hello, {this.props.name}</h1>;
    }
}

 

Component Composition ( 합성 )

ex) 

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

function App(){
	return(
    	<div>
        	<Welcome name = "Sara"/>
            <Welcome name = "Cahal"/>
            <Welcome name = "Edite"/>
        </div>
    );
}

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

 

Component Extraction

복잡하게 중첩된 구조의 Component에서 여러개의 Component로 쪼개는( 추출하는 ) 것.

 

ex) 

function Coment(props){
	return (
    	<div className = "Comment">
        	<div className = "UserInfo">
            	<img className = "Avatar" src = { props.author.avatarUrl } alt = { props.author.name }/>
            	<div className = "UserInfo-name"> { props.auhtor.name } </div>
            </div>
            <div className = "Comment-text"> { props.text } </div>
            <div className = "Comment-date"> { formatDate(props.date) } </div>
        </div>
    );
}

위 코드와 같이 중첩된 구조의 Component의 경우에는 나중에 구성요소들을 변경하기 어려울 수 있고, 각 구성요소들을 개별적으로 재사용하기 힘들다는 단점이 있어 Component를 쪼개어 사용하면 좋다. 

 

아래 코드는 위 Component에서 Avatar를 Extraction한 것이다. 

function Avatar(props){
	// Avatar Extraction
	retrun(
    		<img className = "Avatar"
            src = { props.user.avatarUrl }
            alt = { props.user.name }
            />
    );
}

 

// Avatar Component 적용

function Comment(props){
	return (
    	<div className = "Comment">
        	<div className = "UserInfo">
            	// 추출한 Avatar Component
            	<Avatar user = { props.author } />
            	<div className = "UserInfo-name">
            		{ props.author.name }
                </div>
            </div>
            <div className = "Comment-text">
            	{ props.text }
            </div>
            <div className = "Comment-date">
            	{ formatDate(props.date) }
            </div>
        </div>
    );
}

 

// UserInfo Component Extraction

function UserInfo(props){
	return( 
    	<div className = "UserInfo">
        	<Avatar user = { props.user } />
            <div className = "UserInfo-name-">
            	{ props.user.name }
            </div>
        </div>
    );
}

 

// UserInfo Component 적용

function Comment(props){
	retrun (
    	<div className = "Comment">
        	<UserInfo user = { props.author }/>
            <div className = "Comment-text">
            	{ props.text }
            </div>
            <div className = "Comment-date">
            	{ formatDate(props.date) }
            </div>
        </div>
    );
}

 

Props

- Props는 읽기 전용

- 모든 React Component는 자신의 props를 다룰 때 반드시 순수 함수 처럼 동작해야 한다.

 

순수함수 ? 

=> 순수함수는 어떤 인자를 받던 간에 동일한 인자의 경우 항상 같은 값을 리턴하는 함수를 의미.

---

[ + ] 

const props = { 
	a : 3 
    b : 4
};

///////////////////////////////////////////////////////////////////////////////////

// a 접근 시 
// props.a

 

[ + ]

// props = { a, b }
// 아래 두개 동일

function Component(props)
function Component( { a, b } )

---

 

출처 : https://ko.reactjs.org/docs/components-and-props.html