-
[React] - React Props / State / Life CycleProgramming/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의 자세한 내용은 추후에 업데이트 예정