[React] setState, props

 

지금까지 Vue.js 프로젝트만 해오다 React 프로젝트에 투입되어서 리액트 실습!

 

 

React ❤️ Immutable.js – 리액트의 불변함, 그리고 컴포넌트에서 Immutable.js 사용하기 | VELOPERT.LOG

윗 글에 나온 예시 코드를 활용했다

 

 

 

 

 

모든 변수명이 users인게 헷갈려서 변수명을 임의로변경했다

 

< App.js >

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

class App extends Component {
  id = 3;

  state = {
    input: '',
    userstate: [
      {
        id: 1,
        username: 'hi'
      },
      {
        id: 2,
        username: 'jay'
      }
    ]
  }


  onChange = (e) => {
    const { value } = e.target;
    this.setState({
      input: value
    });
  }

  onButtonClick = (e) => {
    this.setState(( {userstate, input }) => ({ // setState시 re-rendering
      input: '',
      // state.userstate 뒤에 새 user append하고 다시 대입
      userstate : userstate.concat({ 
        id: this.id++,
        username: input
      })
    }))
  }

  render() {
    const { onChange, onButtonClick } = this;
    const { input, userstate } = this.state;

    return (
      <div>
        <div>
          <input onChange={onChange} value={input} />
          <button onClick={onButtonClick}>추가</button>
        </div>
        <h1>사용자 목록</h1>
        <div>
          <UserList asdf={userstate} />
          {/* asdf -> UserList props 로 넘어감 ? */}
        </div>
      </div>
    );
  }
}

export default App;

 

 

< UserList.js >

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

class UserList extends Component {
  shouldComponentUpdate(prevProps, prevState) {
    return prevProps.asdf !== this.props.asdf;
    // return true면 list update 돼서 re-redering
  }

  renderUsers = () => {
    // App.js에서 넘어온 props,,
    const { asdf } = this.props;
    return asdf.map((usera) => <Users key={usera.id} qwer={usera} />);
    // Users 로 넘기는 props, 인자명은 임의로
  };

  render() {
    console.log("UserList 가 렌더링되고 있어요!");
    const { renderUsers } = this;
    return <div>{renderUsers()}</div>;
  }
}

export default UserList;

여기서 아직 모르겠는 것은 Users로 넘길 때 key 값이다.. 이걸 어떻게 쓰는 거지

Vue.js 기억하고 있었으면 알 수 있었을까,, 뷰 다 까먹었어 ㄱ-

 

 

< Users.js >

import React, { Component } from "react";

class Users extends Component {
  shouldComponentUpdate(prevProps, prevState) {
    return this.props.qwer !== prevProps.qwer;
  }
  render() {
    // const { qwer } = this.props; // 이렇게 받아도 되고,,
    // console.log("%s가 렌더링 되고있어요!!!", qwer.username);

    const { qwer : {username} } = this.props;
    // // 이건 qwer로 넘어온 users 객체에서 username 만 쓰겠다는 의미
    console.log("%s가 렌더링 되고있어요!!!", username);

    return <div>{username}</div>;
    // return <div>{qwer.username}</div>;
  }
}

export default Users;

 

리액트 도저언