[React] Core Concepts(JSX, Component, Props, State, Life Cycle…)

React Core Concepts

React 사이트에 정의된 React 가 무엇인지 확인해보면,

A JavaScript library for building user interfaces,
사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 (프레임워크)

즉, UI 를 보다 쉽고 간편하게 만들기 위한 JS 라이브러리입니다.

그렇다면 이 React는 어떻게 사용할까요?

먼저 React 공식 홈페이지에 나온 예시를 보겠습니다.

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

일반 자바스크립트에서 html 태그를 이렇게 직접 삽입을 한다면, 당연히 에러가 났을 것입니다.

JSX는 자바스크립트를 확장한 문법으로, 위와 같은 React element를 생성할 수 있습니다. 또한 component라는 함수와 같은 역할을 하는 것을 이용해 UI를 객체화 시킬 수 있습니다.

이런 React element들을 이용하여 보다 쉽게 UI 관련 작업을 할 수 있습니다.
JSX 에 표현식을 포함하는 법입니다.

출처: https://ko.reactjs.org/docs/state-and-lifecycle.html

Javascript 표현식은 {} 안에 넣어주면 유효해집니다.

DOM 에 render를 시키려면 마지막 문단처럼 ReactDom.render() 로 전달하면 됩니댜.

1. Props & Component

Component 는 위에서 얘기해듯이 React element 를 반환하는데, 자바스크립트의 함수와 비슷합니다. Props 라는 객체를 인자로 받아 Props 를 이용해 React element 를 반환합니다. 이 때 Props 는 속성을 나타내는 데이터입니다.

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

//ES6 의 class 를 이용하여 component 를 class 로도 정의할 수 있습니다.
class Welcome extends React.Component {
  constructor(props) {
    super(props)
    
    this.state = {
      
    }
  }
  
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Welcome 의 props 는 함수의 인자처럼 원하는 input을 입력하면 그에 따른 React element 가 render 됩니다.

컴포넌트를 합성하거나 추출하는 것도 가능합니다.

//<합성>
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 들이 혼합되어 render 될 수도 있습니다.

//추출
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 들이 혼합되어 있는 Component Comment 가 있을 때, 이것들을 더 조그만 Component 들로 나눌 수 있습니다.

function Avatar(props) {
  return (
    <img className=“Avatar”
      src={props.user.avatarUrl}
      alt={props.user.name}
    />
  );
}
function UserInfo(props) {
  return (
    <div className="UserInfo">
      <Avatar user={props.user} />
      <div className="UserInfo-name">
        {props.user.name}
      </div>
    </div>
  );
}
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>
  );
}

이렇게 Comment 안의 UserInfo 는 Avatar 를 포함하고 있습니다. 이러한 구조는 간결함을 높여주고 각 Component 의 상/하위 관계를 나타내는 것에도움을 줍니다.

React 에는 props 에 관한 엄격한 규칙이 있습니다.

• Props 는 pure function 으로 존재해야 한다.

"pure function" 이라 함은 함수의 입력값이 자기 자신의 값을 변경해서는 안되는 것을 의미합니다. Ex)input = input + 1; // X

State

state 는 props와 유사하지만, private 하며 컴포넌트에 의해 완전히 제어됩니다.

class Clock extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      date: new Date()
    };
  }
  
  render() {
    return (
      <div>
        <h1>Hello, World</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    )
  }
}

ES6 class 처럼 constructor 에 super 가 존재하고, 추가로 constructor 안에 state 가 존재합니다. state는 객체의 형태로, 위처럼 key: value 형태로 값을 넣을 수 있습니다.

class Clock extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      date: new Date()
    };
  }
  
  tick() {
    this.setState({
      date: new Date()
    });
  }
  
  render() {
    return (
      <div>
        <h1>Hello, World</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

tick()처럼 component 의 state에 변화를 주려면 직접 재할당을 하는 것이 아닌 setState 를 이용해야 합니다. 또한 setState 는 해당 state 를 가지고 있는 class 에서만 가능합니다.

• State 에는 3가지 특징이 있습니다.

  	1. 아까 한번 언급했듯이 state을 직접 수정하면 안되고 setState을 사용해야 합니다.
  	2. State 업데이트는 비동기적일 수도 있습니다. this.props 와 this.state 가 비동기적으로 업데이트될 수 있기 때문에 항상 업데이트 된 값으로 받아들이면 안됩니다.
  	3. State 업데이트는 병합됩니다. setState 를 호출할 때 React 는 제공한 객체를 현재 state로 병합합니다. 그렇지만 setState 호출을 이용할 때 변수들을 독립적으로 업데이트할 수 있습니다.

React 는 데이터의 흐름이 top-down 형식으로 이루어져 있습니다. 부모 컴포넌트가 자식 컴포넌트에게 자신의 state 이나 props 를 넘기면, 자식 컴포넌트는 그 값을 자신의 props로 받아 값을 대입하거나 또 자신의 자식 컴포넌트로 넘길 수도 있습니다. 상류가 여러 갈래 나누어 하류로 흐르는 것처럼 데이터는 위에서 아래인 단방향으로만 흐르게 됩니다.

출처: https://livebook.manning.com/book/react-in-action/chapter-3/109

Life cycle

React component 는 호출이 되고 소멸이 되는 일련의 과정을 거치는데 이것을 life cycle 이라고 부릅니다. 이 중 두가지 메서드를 알아보겠습니다.

componentDidMount() 메서드를 사용하면 컴포넌트 출력물이 DOM에 처음 렌더링 된후 실행됩니다. 주로 AJAX(fetch) 처리 등을 할 때 사용됩니다. render 하며 일어나는 이러한 과정을 “Mounting” 이라고 합니다.

componentWillUnmount() 메서드는 컴포넌트가 DOM에서 삭제되면 호출됩니다. 이러한 과정을 반대로 “Unmounting” 이라고 합니다.

오늘은 React 에서 기본적인 개념들을 몇가지 다뤄보았습니다. 사실 글을 많이 써보지도 않았고, 항상 이러한 글을 쓸 때마다 내용이 부실해 부끄럽지만 조금씩 더 나은 글을 쓰는 연습이라 생각하고 있습니다. 그래서 조금 더 구체적인 예시를 위해 조만간 서버와 React 를 이용한 Dev.log 를 작성해볼 계획입니다. 감사합니다.

참조

https://reactjs-kr.firebaseapp.com/docs/state-and-lifecycle.html