3 분 소요

1. Component간 통신Permalink

- 하위 Component를 변경하기Permalink

// src/components/A.jsx

export default function A() {
  const [value, setValue] = useState("아직 안바뀜");
  return (
    <div>
      <B value={value} />
      <button onClick={click}>E의 값 바꾸기</button>
    </div>
  );

  function click() {
    setValue("E의 값 변경");
  }
}

function B({ value }) {
  return (
    <div>
      <p>여긴 B</p>
      <C value={value} />
    </div>
  );
}

function C({ value }) {
  return (
    <div>
      <p>여긴 C</p>
      <D value={value} />
    </div>
  );
}

function D({ value }) {
  return (
    <div>
      <p>여긴 D</p>
      <E value={value} />
    </div>
  );
}

function E({ value }) {
  return (
    <div>
      <p>여긴 E</p>
      <h3>{value}</h3>
    </div>
  );
}


// src/App.js

import logo from "./logo.svg";
import "./App.css";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="logo" alt="logo" />
        <A />
      </header>
    </div>
  );
}

export default App;


react-context1


- 상위 Component를 변경하기Permalink

// src/components/A.jsx

export default function A() {
  const [value, setValue] = useState("아직 안바뀜");
  return (
    <div>
      <p>{value}</p>
      <B setValue={setValue} />
    </div>
  );
}

function B({setValue}) {
  return (
    <div>
      <p>여긴 B</p>
      <C setValue={setValue} />
    </div>
  );
}

function C({setValue}) {
  return (
    <div>
      <p>여긴 C</p>
      <D setValue={setValue} />
    </div>
  );
}

function D({setValue}) {
  return (
    <div>
      <p>여긴 D</p>
      <E setValue={setValue}/>
    </div>
  );
}

function E({setValue}) {
  return (
    <div>
      <p>여긴 E</p>
      <button onClick={click}>클릭</buttin>
    </div>
  );

  function click() {
    setValue('A의 값을 변경');
  }
}


react-context2


2. Context APIPermalink

하위 Component 전체에 데이터를 공유하는 법Permalink

  • 데이터를 Set 하는 것
    • 가장 상위 Component => 프로바이더
  • 데이터를 Get 하는 것
    • 모든 하위 Component에서 접근 가능
      • 컨슈머로 하는 방법
      • Class Component의 this.context로 하는 방법
      • Functional Component의 useContext로 하는 방법


@1. 데이터를 Set 하기Permalink

  1. 일단 컨텍스트를 생성
  2. 컨텍스트.프로바이더를 사용
  3. value를 사용
// src/contexts/PersonContext.js

import React from "react";

const PersonContext = React.createContext();

export default PersonContext;


// src/index.js

const persons = [
  {id: 0, name: 'Mark', age: 39},
  {id: 1, name: 'Hanna', age: 28}
]

ReactDOM.render(
  <React.StrictMode>
    <PersonContext.Provider value={persons}>
      <App />
    </PersonContext.Provider>
  </React.StrictMode>
  document.getElementById("root")
);


@2. 데이터를 Get 하기 - ConsumerPermalink

  1. 컨텍스트를 가져옴
  2. 컨텍스트.컨슈머를 사용
  3. value를 사용
// src/components/Example1.jsx

import PersonContext from "../contexts/PersonContext";

export default function Example1() {
  return (
    <PersonContext.Consumer>
      {(persons) => (
        <ul>
          {persons.map((person) => (
            <li>{person.name}</li>
          ))}
        </ul>
      )}
    </PersonContext.Consumer>;
  );
}


// src/App.js

import logo from "./logo.svg";
import "./App.css";
import Example1 from "./components/Example1";

function App({ hasMounted }) {
  const width = useWindowWidth();
  const hasMountedFromHooks = useHasMounted();

  console.log(hasMounted, hasMountedFromHooks);

  return (
    <div className="App">
      <header className="header">
        <img src={logo} className="logo" alt="logo" />
        <Example1 />
      </header>
    </div>
  );
}

export default App;


react-context3


@3. 데이터를 Get 하기 - classPermalink

  1. static contextType에 컨텍스트를 설정
  2. this.context => value
// src/components/Example2.jsx

import React from "react";
import PersonContext from "../contexts/PersonContext";

export default class Example2 extends React.Component {
  static contextType = PersonContext;

  render() {
    const persons = this.context;
    return (
      <ul>
        {persons.map((person) => (
          <li>{person.name}</li>
        ))}
      </ul>
    );
  }
}


// src/App.js

import logo from "./logo.svg";
import "./App.css";
import Example1 from "./components/Example1";
import Example2 from "./components/Example2";

function App({ hasMounted }) {
  const width = useWindowWidth();
  const hasMountedFromHooks = useHasMounted();

  console.log(hasMounted, hasMountedFromHooks);

  return (
    <div className="App">
      <header className="header">
        <img src={logo} className="logo" alt="logo" />
        <Example1 />
        <Example2 />
      </header>
    </div>
  );
}

export default App;


react-context4


@4. 데이터를 Get 하기 - functionalPermalink

  1. useContext로 컨텍스트를 인자로 호출
  2. useContext의 return이 value
// src/components/Example3.jsx

import PersonContext from "../contexts/PersonContext";

export default function Example1() {
  const persons = useContext(PersonContext);

  return (
    <ul>
      {persons.map((person) => (
        <li>{person.name}</li>
      ))}
    </ul>
  );
}


// src/App.js

import logo from "./logo.svg";
import "./App.css";
import Example1 from "./components/Example1";
import Example2 from "./components/Example2";
import Example3 from "./components/Example3";

function App({ hasMounted }) {
  const width = useWindowWidth();
  const hasMountedFromHooks = useHasMounted();

  console.log(hasMounted, hasMountedFromHooks);

  return (
    <div className="App">
      <header className="header">
        <img src={logo} className="logo" alt="logo" />
        <Example1 />
        <Example2 />
        <Example3 />
      </header>
    </div>
  );
}

export default App;


react-context5

댓글남기기