React component 를 만드는 제일 간단한 방법은 자바스크립트 함수를 만드는 것이다.
props 는 “properties”를 줄인 말
뭔가 함수의 파라미터 역할 같은걸 하는것 같음
function Welcome(props) { return <h1>Hello, {props.name}</h1>; }
이처럼 function Welcome 은 function component 라고 함.
ES6을 이용해 클라스를 React component 로 만들 수 있음
extends 를 이용하면 됨
class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } }
이 코드는 위의 코드와 같다.
근데 react가 훨씬 간편하게 코드를 짠다 !
React 는 사용자가 정의한 element 를 보면 JSX 의 특성을 하나의 옵젝트로 부여한다.
이걸 바로 props 라고 부름
function Welcome(props) { return <h1>Hello, {props.name}</h1>; } const element = <Welcome name=”Grace” />; ReactDOM.render( element, document.getElementById(‘root’) );
이 코드를 살펴보자
1. ReactDOM.render 를 사용해서 우리는 element 라는 요소를 부른다.
2. element 라는 요소는 Welcome 이라는 함수를 호출하고 “Grace” 라는 값을 props 로 보낸다.
3. Welcome 은 <h1>Hello, {props.name}</h1> 이라는 element 를 반환한다.
4. ReactDOM 은 이거를 참고해 element 를 다시 업데이트 시켜준다
3번을 주목하고 싶은데,
이건 그냥 내 이해를 위해 정리하는건데
우리는 보통 코드를 사용하고 메소드나 함수를 만들 때
public void Welcome(String fname, int age){ System.out.println(fname, age); }
이렇게 사용하는데
React는 이런 식으로 ? 하는 것 같군
function Welcome(props) { return <h1>Hello, {props.fname} {props.age} </h1>; } const element = <Welcome fname=”Grace” age=”31" />; ReactDOM.render(element, document.getElementById(‘root’));
코드 결과
컴포넌트는 다른 컴포넌트들을 참조할 수 있다.
자바에서도 어떤 함수가 다른 함수를 function body 에 사용할 수 있는 것처럼 ?
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’) );
보면 <App/> 이라는 element 를 render 하는데 이 App 에는 <Welcome> 이라는 component를 부른다
위 코드의 결과
그리고 컴포넌트는 최대한 단순하게? 만드는 것이 좋다.
그래서 컴포넌트를 쪼개는 것에도 익숙해져야함 !
예를 들자면 !
function Comment(props) { return ( <div className=”Comment”> <div className=”UserInfo”> <img className=”Avatar” src={props.author.avatarUrl} alt={props.author.name} /> <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> ); }
이 component는 author 라는 옵젝트와 text 라는 String 과 date 라는 Date 를 props 로 가지고 있다
제일 처음 해야할 것은 Avatar 를 추출하기
function Avatar(props) { return ( <img className=”Avatar” src={props.user.avatarUrl} alt={props.user.name} /> ); }
이렇게 추출하고 나서 맨 위의 Comment 라는 코드는
function Comment(props) { return ( <div className=”Comment”> <div className=”UserInfo”> <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> ); }
이렇게 바뀜 !!
다음 추출할 component 는 UserInfo 이다 .
function UserInfo(props) { return ( <div className=”UserInfo”> <Avatar user={props.user} /> <div className=”UserInfo-name”> {props.user.name} </div> </div> ); }
UserInfo 에 Avatar 이라는 component를 참조해서 코드를 완성시켰다!
그럼 코드는 더 단순화 된다!
function Comment(props) { return ( <div className=”Comment”> <UserInfo user={props.author} /> <div className=”Comment-text”> {props.text} </div> <div className=”Comment-date”> {formatDate(props.date)} </div> </div> ); }
웨우웨우
사실 결과는 똑같은데 , 이렇게 분리 시켜 놓으면 나중에 이런 컴포넌트들을 다른 곳에 사용할 수 있어서 좋음 !!
Props 는 Read-Only 이다
그래서 component들도 이거에 따라 두가지로 나뉘는데
<pure>
function sum(a, b) { return a + b; }
<impure>
function withdraw(account, amount) { account.total -= amount; }
이 두가지로 나뉘어진다.
pure 는 props 들을 건들지 않음.
impure 는 props 를 수정하거나 값을 변경하려고 함.
React 는 물론 유연하게 대처해서 둘다 실행은 가능하겠지만
props 를 존중?해주는 pure 한 컴포넌트를 만드는 것을 권유한다.