React, Front-end Library(2)

https://reactjs.org/docs/hello-world.html에서 react에 대해 공부하고 정리해본다.

Element Rendering.

element는 React에서 가장 작은 단위다. element는 화면에 표시할 내용을 아래와 같이 나타낸다.
 const element = <h1>Hello, world</h1>

React 엘리먼트는 일반 객체이며, 쉽게 생성할 수 있다. React DOM은 React element가 DOM에 맞게 element를 바꿔준다.
 HTML에 <div>가 있다고 할 때, 이 안에 들어가는 element들을 React DOM이 관리를 한다. 이때 HTML의 <div>를 “root DOM” node라고 부른다. React로 구현이 되는 Application은 보통 하나의 루트 DOM 노드가 있다. React를 구현되어져 있는 Application에 넣는 경우 많은 수의 독립된 루트 DOM이 있을 수 있다. 
 React element를 root DOM node에 rendering하려면 ReactDOM.render()로 아래와 같이 두가지를 모두 전달을 하면된다.

 

const element = <h1>Hello, world! </h1>;
ReactDOM.render(element, document.getElementById(‘root’));

 

React element는 변하지 않는 객체이다. element를 생성한 이후에는 해당하는 element값이나 자식의 속성을 변경할 수 없다. UI를 바꾸는 유일한 방법은 새로운 element를 생성하고 이를 ReactDOM.render()로 전달하는 방법 뿐이다.

 

function tick(){
  const element = (
    <div> 
      <h1>Hello, world! </h1> 
      <h2> It is {new Date().toLocalTimeString()}.</h2>
    </div>
  );
}
  
ReactDOM.render(element, document.getElementById(‘root’));}setInterval(tick,1000);

 

위와 같이 setInterval() 콜백을 이용해 초마다 ReactDOM.render()를 호출해서 원하는 부분만 DOM을 바꿔 줄 수 있다. tick 함수 전체를 1초마다 다시 return 하도록 element를 만들었지만, React DOM은 내용이 변경되는 text node만을 업데이트해준다.

Components and Props

Components는 JavaScript의 함수와 유사하다. ‘props’ 라는 임의의 값을 받아 화면에 어떻게 표시가 되는지를 React element로 반환한다.

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

위와 같은 JavaScript 함수가 있을 때, 이 함수는 props라는 arguments를 받아 Welcome이라는 함수를 실행시킨다. props라는 인자를 받아 React element를 반환하므로 위와 같은 함수를 JavaScript component라고 한다. 위 함수는 ES6 class를 사용해 다음과 같이 바꿀 수 있다.

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

 

React element는 사용자 정의 component로 나타낼 수 있다.

const element = <Welcome name="Sara" />;

위와 같이 사용자가 작성한 element를 React가 발견하면 JSX attribute로 해당 element를 단일 객체로 만든다. 이 객체를 “props” 라고 한다. React에서는 아래와 같은 행동양식으로 component를 만든다.
1. <Welcome name = “Sara” /> element로 ReactDOM.render()가 호출된다.
2. React는 {name: ‘Sara’}를 props해서 Welcome component를 호출한다.
3. Welcome component는 결과적으로 <h1>Hello, Sara</h1>라는 element를 반환한다.
4. React DOM은 <h1>Hello, Sara</h1> element와 같은 값이 호출되도록 DOM을 바꾼다.

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

const element = <Welcome name="Sara" />;

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

Component의 이름은 항상 대문자로 시작한다. React는 소문자로 시작하는 component를 DOM태그로 처리한다. 따라서 대문자를 써야 React가 이를 인식할 수가 있다.

Composing Component.

Component는 아래와 같이 자신의 생성 값에 다른 Component를 참조할 수 있다. React 앱에서는 버튼, 폼, 다이얼로그, 화면 등의 모든 것이 컴포넌트로 표현된다.

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'));

Extracting Components.

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는 Avatar 객체를 

<div className="UserInfo">
  <Avatar user={props.user} />
  <div className="UserInfo-name">
    {props.user.name}
  </div>
</div>

는 <UserInfo user={props.author} /> 로 추출할 수 있어 결국 아래와 같이 나타낼 수 있다.

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는 읽기 전용이다.

React에서는 함수 component나 class component 모두 props 자체를 수정해서는 안된다. 모든 React component는 자신의 props를 다룰 때 반드시 pure function의 형태로 동작을 해야한다는 조건이 있다.

순수함수 : 동일한 입력값에 동일한 결과를 반환하는 함수.

function withdraw(account, amount) {
  account.total -= amount;
} // 이런 경우 순수 함수가 아니다.

function sum(a, b) {
  return a + b;
} //항상 같은 값을 return한다. (순수함수)