개발야옹

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

Element

React app의 가장 작은 단위로, screen에 표시할 content를 표현.

ex)

const element = <h1>Hello, world</h1>;

Browser DOM Element와 달리 React Element 는 일반 객체이며, 쉽게 생성이 가능하다. ReactDOM은 React element와 일치하도록 DOM을 Update해준다. 

※ Element는 Component의 구성요소.

※ React Element는 불변객체로서, Element를 생성한 이후에는 해당 element의 자식이나 속성을 변경할 수 없기 때문에 UI를 새로 Update하기 위해서는 새로운 Element를 생성하여 ReactDOM.render() 로 전달하여 redering해줘야 한다. 

[ + ] React Element는 사용자 정의 Component로도 나타낼 수 있다.

ex) 

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


const element = <Welcome name ="Sara"/>;
ReactDOM.render(
	element, 
    document.getElementById('root')
);

과정 : 

1) <Welcome name = "Sara"/> element로 ReactDOM.render() 호출

2) props 값 : { name : 'Sara' } 를 Welcome component로

3) Welcome Component의 결과로 <h1>Hello, Sara</h1> element 반환

4) ReactDOM은 반환된 해당 element( <h1>Hello, Sara</h1> ) 와 DOM이 일치하도록 UPDATE

결과 값 => Hello, Sara

JSX 

Javscript를 확장한 문법으로, JS의 모든 기능이 포함되어 있다. 

JSX는 React element를 생성한다. 

React에서 HTML을 표현할 때 JSX를 사용하는데 겉으로 보기에는 HTML을 입력하는 것 처럼 보이지만, Build 시 Babel( Javascript Compiler ) 에 의해서 JS로 변환된다. 

※ React에서 JSX를 사용하는 것은 필수가 아니지만 대부분 사용한다. ( 1. UI관련 작업 시 시각적으로 도움이 됨. 2. Error 및 경고 메시지 표시 더 잘 뜸. ) 

JSX 표현식

1. 중괄호 내에는 모든 유효한 JS 표현식 사용가능.

    (1) 변수 

const nmae = "Kite z";
const element = <h1>Hello, {name}</h1>

ReactDOM.render(
	// ReactDOM.render : React component를 Web browser에 redering하는 API
	element,
    document.getElementById('root')
);

    (2) 함수 호출 결과

function formatName(user){
	return user.firstName + ' ' + user.lastName;
}

const user = {
	firstName : "Kite",
    lastName : "z"
};

const elemnet = (
	<h1>
    	Hello, {formatName(user)}!
    </h1>
);

ReactDOM.render(
	element, 
    document.getElementById('root')
);

2. JSX attribute 정의

    (1) 따옴표 사용

const element = <div Index = "0"></div>;

    (2) 중괄호 사용 

const element = <img src = { user.avatarUrl }></img>;

두가지 표현식 중 하나만 사용해야 하며, 동시 사용 X

출처 : https://ko.reactjs.org/docs/introducing-jsx.html