06.28 화 context

이재빈·2022년 6월 28일

AI스쿨_JS

목록 보기

16/18

Context

어떤 component tree 내에서 최상위 component와 최말단 component 에 걸쳐 전역(global)으로 관리해야 할 데이터가 필요한데,
이 때 React Context는 전역 데이터를 좀 더 단순하게 접근 가능하게 해준다.
"컨텍스트는 모든 레벨에서 일일이 props를 넘기지 않고도 컴포넌트 트리에 걸쳐서 데이터를 전달할 수 있는 방법을 제공합니다."

방법

consumer, useContext , contextType으로 접근

consumer 로 context 접근

<script>
function Title() {
    return(
        <LangContext.Consumer>
            {lang => {
                const text = lang === "en"? "Context":"컨텍스트";
                return <h1>{text}</h1>
            }}
        </LangContext.Consumer>
    )
}
</script>

usecontext로 접근

<script>
function Button({toggleLang}){
    const lang = useContext(LangContext);
    return <button  onClick={toggleLang}>{lang}</button>;
}

export default Button;
</script>

contextType으로 접근

<script>
class Message extends Component{
    static contextType = LangContext;

   render(){
        const lang = this.context;
        if(lang === "en")
        return(
            <p>
                "Context provides a way to pass data through the component tree without having to pass porops down manually at every level"
            </p>
        );
        else
            return(
                <p>
                    "컨텍스트는 모든 레벨에서 일일이 props를 넘기지 않고도 컴포넌트 트리에 걸쳐서 데이터를 전달할 수 있는 방법을 제공합니다."
                </p>
            )
    }
}
</script>

React 사용의 변화

예전 방법 : 한 파일에 모든 것을 넣기
-> 현재 쓰는 방법: components 폴더에 component들을 넣기

<script>
import './App.css';
import React,{Component} from 'react';

//AddBynber 이라는 컴퍼넌트를 만듬
class AddNumber extends Component{
  render(){
    return(
      <div>
        <h1>Add Number</h1>
        <input type="button" value="+"></input>
        <input type="text" value="0"></input>
      </div>
    );
  }
}
// AddNumbder 컴퍼넌트를 사용
class AddNumberRoot extends Component {
  render(){
    return (
      <div>
        <h1>Add Number Root</h1>
        <AddNumber></AddNumber>
      </div>
    );
  }
}
function App() {
  return (
    <div className="App">
    <h1>Root</h1>
    </div>
  );
}
</script>

을

<script>
import './App.css';
import React from 'react'; //Component를 이 파일에서 쓰지 않음으로 {Component}가 포함되어도 출력은 되지만 경고메세지가 뜨게 됨으로 삭제해줬음
// component로 만들어서 다른 파일로서 저장 후 불러오기
//AddNumberRoot파일에 Addnumber를 사용했음
import AddNumberRoot from "./components/AddNumberRoot" 

function App() {
  return (
    <div className="App">
    <h1>Root</h1>
    <AddNumberRoot></AddNumberRoot> //원하는 부분에 넣기
    </div>
  );
}
</script>

모르는 것

class ~ extends Component 쓸때랑 function(){}로 시작할 때랑 차이

component를 사용할 때 코드입력창에 rcc만 입력하면

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        
      </div>
    );
  }
}

export default App;

이 나옴. 이 코드의 뜻은 Component을 이용해서 결과로서 App을 도출할 때 사용하고
function은 말그대로

function App() {
  return (
    <div className="App">
    <h1>Root</h1>
    <AddNumberRoot></AddNumberRoot> {/*원하는 부분에 넣기*/}
    <DisplayNumberRoot></DisplayNumberRoot>
    </div>
  );
}

export default App;