1. 학습내용
오늘도 이어서 간단한 실습을 해나갔다.
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;
위처럼 적어 주었던 것을 좀더 간결하게 적고, 폴더를 components라고 따로 만들어 해당하는 js파일들을 만들어서 코드를 수정했다.
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";
// function Button({lang, toggleLang}){
// return <button onClick={toggleLang}>{lang}</button>
// }
// export default Button;
아래는 수정한 부분들
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;leng에 대한 클래스 부분을 전부 파일을 따로 만들어 삭제하거나 단순히 변수로 만들어 주었다.
// 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, { 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 from 'react';
// function Title({lang}) {
// const text = lang === "en"? "Context" : "컨텍스트";
// return <h1>{text}</h1>;
// }
// export default Title;
아래가 수정한 코드
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;2. 어려웠던 점 및 해결방안
컴포넌트에 대한 개념이 어려워서 구글링해보았다.
리액트 컴포넌트(Component)란?
- 리액트로 만들어진 앱을 이루는 최소한의 단위
- 기존의 웹 프레임워크는 MVC방식으로 분리하여 관리하여 각 요소의 의존성이 높아 재활용이 어렵다는 단점이 있었다. 반면 컴포넌트는 MVC의 뷰를 독립적으로 구성하여 재사용을 할 수 있고 이를 통해 새로운 컴포넌트를 쉽게 만들 수 있다.
- 컴포넌트는 데이터(props)를 입력받아 View(state) 상태에 따라 DOM Node를 출력하는 함수.
- 컴포넌트 이름은 항상 대문자로 시작하도록 한다.
(리액트는 소문자로 시작하는 컴포넌트를 DOM 태그로 취급하기 때문이다.)
- UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 코딩한다.
- “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.
- props와 state 등의 특징들은 따로 정리 하도록 한다.
출처: https://goddaehee.tistory.com/299 [갓대희의 작은공간:티스토리]
여기서 MVC방식이 뭔지 몰라서 또 찾아보았다.
M(Model) V(View) C(Controller) 패턴
Model : Data
View : UI
Controller : logic
출처: https://rinlab.tistory.com/162
일종의 디자인 패턴이라고 한다.
웹 아키텍쳐를 구성하는 기본 개념인듯 싶었다.
출처 : https://velog.io/@teo/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C%EC%97%90%EC%84%9C-MV-%EC%95%84%ED%82%A4%ED%85%8D%EC%B3%90%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80%EC%9A%94
3. 학습소감
점점 자주쓰는 코드의 패턴은 보였지만, 여전히 js와 다른 코드가 보이고 이게 어떤식으로 연결되는지는 아직은 알아차리기 힘들었다. 오늘 나왔던 '컴포넌트'에 대한 개념도 비전공자인 내가 한번에 알아듣기 힘든 개념들이 같이 설명되어 있어 자료를 찾아보면서도 이해가 살짝 어렵기도 했다.
