ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [React] - React Props / State / Life Cycle
    Programming/React 2019. 4. 18. 14:13

    // 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의 자세한 내용은 추후에 업데이트 예정

Designed by Tistory.