[React] - React Props / State / Life Cycle

// React의 개념

- React는 자바스크립트 라이브러리 중 하나로서 사용자 인터페이스를 제작하기 위해 사용된다

- 페이스북이 자사 서비스의 UI를 효율적으로 만들기 위하여 만든 라이브러리이다

- React를 사용하면 사용자와 상호작용 할 수 있는 UI를 쉽게 만들 수 있다

- Component(구성요소) 단위로 쪼개어 UI를 제작한다

 

 

// React - Props

- 부모 Component가 자식 Component에게 전달해주는 값

- 자식 Component는 Props를 받아오기만 하고 수정을 할 수는 없다

 

한번 코드를 통해서 예제로 확인해보자

import React, { Component } from 'react';
import MyName from './MyName';

//App이라는 부모 컴포넌트에서 자식 컴포넌트인 MyName에게 props를 전달하고있다
class App extends Component {
  render() {
    return (
      <MyName name="리액트" />
    );
  }
}

export default App;

import React from 'react';

//자식 컴포넌트인 MyName은 App에서 보내준 props를 가져와 사용한다
const MyName = ({ name }) => {
  return (
    <div>
      안녕하세요! 제 이름은 {name} 입니다.
    </div>
  );
};

export default MyName;

위 코드의 실행 결과는 이렇게 된다

출처: 벨로퍼트님의 블로그

---

// React - State

- 컴포넌트 내부에 선언하여 값을 수정할 수 있다

- State를 사용하면 동적으로 데이터를 다룰 수 있다

- State를 변경할 때는 항상 setState() 함수를 사용하여 변경하여야 한다

 

한번 코드를 통해서 예제를 확인해보자

import React, { Component } from "react";
import TodoList from "./Grocery";

class App extends Component {
  render() {
    return (
      <div>
        <h1>GroceryList</h1>
        <TodoList todos={["psh", "IM12", "React"]} />
      </div>
    );
  }
}
export default App;

import React, { Component } from "react";

const TodoList = props => (
  <ul>
    {props.todos.map(todo => (
      <GroceryList todo={todo} />
    ))}
  </ul>
);

class GroceryList extends Component {
  state = {
    done: false,
    hover: false,
    todo: this.props.todo
  };

  onListItemClick = () => {
    this.setState({
      done: !this.state.done
    });
  };

  handelHover = () => {
    this.setState({
      hover: !this.state.hover
    });
  };

  render() {
    const style = {
      textDecoration: this.state.done ? "line-through" : "none",
      fontWeight: this.state.hover ? "bold" : "normal"
    };
    return (
      <li
        style={style}
        onClick={this.onListItemClick}
        onMouseEnter={this.handelHover}
        onMouseLeave={this.handelHover}
      >
        {this.state.todo}
      </li>
    );
  }
}

export default TodoList;

위의 코드를 실행하면 

이러한 실행결과가 나오며 각 리스트에 마우스가 올라가면 글자가 bold처리되고 

각 리스트를 클릭하면 글자에 줄이 생긴다

이런식으로 동적으로 UI를 변경하기 위해서 state를 사용한다

 

---

// React - Life Cycle API

- Life Cycle API는 컴포넌트가 사용자의 브라우저에 생성될 때, 업데이트될 때, 제거될 때 호출되는 API이다

 

그림을 통해서 알아보자

Life Cycle의 자세한 내용은 추후에 업데이트 예정