200207 React

React

Context API

import React, { Fragment } from 'react';

const UserContext = React.createContext('unknown')

class App extends React.Component {

  render() {

    return (

        <div>

          <UserContext.Provider value="NickName">

            <div>상단 메뉴</div>

            <Profile />

            <div>하단 메뉴</div>

          </UserContext.Provider>

        </div>

    )

  }

}

function Profile() {

  return (

    <div>

      <Greeting />

    </div>

  )

}

function Greeting() {

  return (

    <UserContext.Consumer>

      { username => <p>{`${username}님 안녕하세요`}</p>}

    </UserContext.Consumer>

  )

}

export default App;

Provider, Consumer

import React, { Fragment } from 'react';

const ThemeContext = React.createContext('power')

const UserContext = React.createContext('unknown')

class App extends React.Component {

  state = { username: '' };

  onChange = e => {

    const username = e.target.value

    this.setState({ username })

  }

  render() {

    const { username } = this.state

    return (

      <div>

        <ThemeContext.Provider value="light">

          <UserContext.Provider value={username}>

            <div>상단 메뉴</div>

            <Profile />

            <div>하단 메뉴</div>

            <input type='text' value={username} onChange={this.onChange}></input>

          </UserContext.Provider>

        </ThemeContext.Provider>

      </div>

    )

  }

}

class Profile extends React.Component {

  shouldComponentUpdate() {

    return true;

  }

  render() {

    console.log("홍길동")

    return (

      <div>

        <Greeting />

      </div>

    )

  }

}

function Greeting() {

  return (

    <ThemeContext.Consumer value="light">

      {theme => (

        <UserContext.Consumer>

          {username => <p style={{color: theme === 'dark' ? 'gray' : 'green'}}>{`${username}님 안녕하세요`}</p>}

        </UserContext.Consumer>

      )}

    </ThemeContext.Consumer>

  )

}

export default App;