리액트 컴포넌트는 리액트 엘리먼트를 조금 더 자유롭게 다루기 위한 하나의 문법입니다.
import React, { Component, Fragment } from 'react';
import Button from "./components/Button";
import Title from "./components/Title";
import Message from "./components/Message";
class App extends Component {
state = {lang: "en"};
toggleLang = () =>{
this.setState(({lang}) => ({
lang: lang === "en" ? "kr" : "en"
}));
};
render() {
const {lang} = this.state;
return (
<Fragment>
<Button lang={lang} toggleLang={this.toggleLang} />
<Title lang={lang} />
<Message lang={lang} />
</Fragment>
);
}
}
export default App;
import React from "react";
function Title({lang}) {
const text = lang === "en" ? "Context :" : "컨텍스트";
return <h1>{text}</h1>;
}
export default Title;
import React, {Component} from "react";
class Message extends Component{
render() {
const {lang} = this.props;
if(lang === "en")
return (
<p>
"Context provides a way to pass data through the component tree without having to pass props down manually at every level"
</p>
);
else
return(
<p>
"컨텍스트는 모든 레벨에서 일일이 props를 넘기지 않고도 컴포넌트 트리에 걸쳐서 데이터를 전달할 수 있는 방법을 제공합니다."
</p>
);
}
}
export default Message;
import React from "react";
function Button({lang, toggleLang}) {
return <button onClick = {toggleLang}>{lang}</button>;
}
export default Button;
import React, {Component} from 'react';
import Button from "./components/Button";
import Title from "./components/Title";
import Message from "./components/Message";
import LangContext from './LangContext';
class App extends Component {
state = {lang: "en"};
toggleLang = () =>{
this.setState(({lang}) => ({
lang: lang === "en" ? "kr" : "en"
}));
};
render() {
const {lang} = this.state;
return (
<LangContext.Provider value = {lang}>
<Button toggleLang={this.toggleLang} />
<Title />
<Message />
</LangContext.Provider>
);
};
}
export default App;
import React from "react";
import LangContext from "../LangContext";
function Title() {
return (
<LangContext.Consumer>
{lang => {
const text = lang !== "en" ? "Context" : "컨텍스트"
return <h1>{text}</h1>;
}}
</LangContext.Consumer>
);
}
export default Title;
import React, {Component} from "react";
import LangContext from "../LangContext";
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 props down manually at every level"
</p>
);
else
return(
<p>
"컨텍스트는 모든 레벨에서 일일이 props를 넘기지 않고도 컴포넌트 트리에 걸쳐서 데이터를 전달할 수 있는 방법을 제공합니다."
</p>
);
}
}
export default Message;
import React, { useContext } from "react";
import LangContext from "../LangContext";
function Button({toggleLang}) {
const lang = useContext(LangContext);
return <button onClick = {toggleLang}>{lang}</button>;
}
export default Button;
import { createContext } from "react";
const LangContext = createContext("en");
export default LangContext;