간단한 번역 앱을 구축하여 React Context System 이해

새로운 시리즈에 오신 것을 환영합니다. 여기에서는 ReactJS의 새로운 컨텍스트 시스템을 사용하여 작은 번역 앱을 만듭니다.

이 시리즈는 Stephen Grider의 "Modern React with Redux"시리즈udemy의 예에서 영감을 받았습니다.

따라서 터미널을 열고 새로운 반응 앱 번역을 만드십시오.

번역 앱

다음으로 cd를 번역하고 해당 폴더에서 코드 편집기를 열고 npm start를 수행합니다.

그런 다음 코드 편집기에서 src 디렉터리로 이동하여 그 안의 모든 항목을 제거합니다.

모두 삭제

다음으로 src 디렉토리 안에 index.js를 만들고 React에 대한 상용구 코드를 추가합니다.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

ReactDOM.render(
    <App />, document.querySelector('#root')
);

그런 다음 src 디렉토리 안에 구성 요소 폴더를 만듭니다. 여기에서 App.js 파일을 만듭니다.

구성 요소 폴더

App.js의 내용은 아래와 같습니다.

import React, { Component } from 'react'

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

export default App;

그런 다음 브라우저를 체크인하여 기본 설정이 완료된 위치를 확인하십시오.

앱이 렌더링됨

다음으로 기본 언어 선택기를 포함하도록 App.js를 업데이트합니다.

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

class App extends Component {
    state = { language: 'english' };

    onLangChange = (lang) => {
        this.setState({ language: lang });
    }

    render() {
        return (
            <div className="main__container">
               <div className="lang__flags">
                <span>Select a language :</span>
                <span onClick={() =>  this.onLangChange('english')}>🇺🇸</span>
                <span onClick={() => this.onLangChange('hindi')}>🇮🇳</span>
               </div>
               {this.state.language}
            </div>
        )
    }
}

export default App;

또한 동일한 디렉토리에 App.css 파일을 생성하고 아래 코드를 추가합니다.

.main__container {
    display: grid;
    place-content: center;
    grid-gap: 10px;
}

.lang__flags {
    font-size: 1.5rem;
    font-weight: bold;
}

이제 앱은 텍스트를 변경하는 두 개의 클릭 가능한 플래그가 있는 아래와 같습니다.

기본 레이아웃

다음으로 구성 요소 디렉터리 내에 세 개의 새 파일인 UserCreate.js, Button.js 및 Field.js를 만듭니다.

새 파일

이제 입력 상자와 제출 버튼이 포함된 기본 양식을 표시하기 위해 이러한 파일 내에 코드를 빠르게 추가합니다.

UserCreate.js에 아래 코드를 입력합니다.

import React from 'react';
import Field from './Field';
import Button from './Button';

const UserCreate = () => {
    return (
        <div className="ui__form">
            <Field />
            <Button />
        </div>
    )
}

export default UserCreate

그런 다음 Field.js에 이 코드를 입력합니다.

import React, { Component } from 'react'

class Field extends Component {
    render() {
        return (
            <div>
                <label>Name </label>
                <input />
            </div>
        )
    }
}

export default Field;

그런 다음 Button.js에 다음 코드를 입력합니다.

import React, { Component } from 'react';

class Button extends Component {
  render() {
    return (
      <button>Submit</button>
    )
  }
}

export default Button;

App.css에 이 양식에 대한 몇 가지 스타일도 넣을 것입니다.

…
…

.ui__form {
    display: grid;
    grid-gap: 10px;
    background: #f9f9f9;
    border: 1px solid #c1c1c1;
    margin: 2rem auto 0 auto;
    width: 600px;
    padding: 1em;
  }

  .ui__form input {
    background: #fff;
    border: 1px solid #9c9c9c;
    font-size:1rem;
    padding: 0.7em;
  }
  .ui__form input:focus {
    outline: 3px solid gold;
    width:80%;
  }
  .ui__form label {
      font-size:1.2rem;
      font-weight: 900;
  }
  .ui__form button {
    background: lightgrey;
    border-radius: 2%;
    font-size:1.2rem;
    padding: 0.7em;
    width: 30%;
    border: 0;
  }
  .ui__form button:hover {
    background: gold;
  }
  .err__msg{
      font-size: 1rem;
      color:red;
  }

  h3{
    text-align: center;
  }

이제 App.js로 이동하여 UserCreate 구성 요소를 연결합니다.

render() {
        return (
            <div className="main__container">
               <div className="lang__flags">
                <span>Select a language :</span>
                <span onClick={() => this.onLangChange('english')}>🇺🇸</span>
                <span onClick={() => this.onLangChange('hindi')}>🇮🇳</span>
               </div>
               **<UserCreate />**
            </div>
        )
    }

이제 우리의 앱은 이 아름다운 형태를 보여줍니다.

아름다운 포름

이제 컨텍스트 시스템을 사용하여 앱 구성 요소에서 버튼 및 필드 구성 요소로 데이터를 전달합니다.

컨텍스트 시스템이 없으면 App에서 UserCreate로, 거기에서 Button 및 Field 구성 요소로 전달해야 했습니다.

이제 src 디렉토리 안에 새 폴더 contexts를 만들고 그 안에 LanguageContext.js 파일을 만듭니다.

LanguageContext

다음으로 LanguageContext.js 파일 내에 컨텍스트 개체를 만들고 영어를 기본값으로 전달합니다.

import React from 'react';

export default React.createContext('english');

다음으로 Button.js 파일에서 이 컨텍스트 개체를 사용합니다.

import React, { Component } from 'react';
import LanguageContext from '../contexts/LanguageContext';

class Button extends Component {
  static contextType = LanguageContext;

  render() {
    const text = this.context === 'english' ? 'Submit' : 'जमा करें';
    return (
      <button>{text}</button>
    )
  }
}

export default Button;

이제 이 컨텍스트 개체를 사용하도록 Field.js 파일을 업데이트할 시간입니다.

import React, { Component } from 'react';
import LanguageContext from '../contexts/LanguageContext';

class Field extends Component {
    static contextType = LanguageContext;

    render() {
        const text = this.context === 'english' ? 'Name' : 'नाम';

        return (
            <div>
                <label>{text}</label>
                <input />
            </div>
        )
    }
}

export default Field;

문static contextType = LanguageContext은 컨텍스트 개체를 사용하기 위한 상용구입니다.

다음으로 App.js 파일로 돌아가서 LanguageContext 개체를 사용합니다. Provider로 구성 요소를 UserCreate로 래핑하고 값을 전달해야 합니다. 이 경우에는 언어의 현재 값입니다.

import React, { Component } from 'react';
import UserCreate from './UserCreate';
import LanguageContext from '../contexts/LanguageContext';
import './App.css';

class App extends Component {
    state = { language: 'english' };

    onLangChange = (lang) => {
        this.setState({ language: lang });
    }

    render() {
        return (
            <div className="main__container">
               <div className="lang__flags">
                <span>Select a language :</span>
                <span onClick={() => this.onLangChange('english')}>🇺🇸</span>
                <span onClick={() => this.onLangChange('hindi')}>🇮🇳</span>
               </div>
               <LanguageContext.Provider value={this.state.language}>
                <UserCreate />
               </LanguageContext.Provider>
            </div>
        )
    }
}

export default App;

자식 구성 요소(이 경우에는 필드 및 버튼)에서 데이터를 사용하거나 표시하는 또 다른 방법이 있으며 이는 컨텍스트 개체 대신 소비자를 통해 이루어집니다. 우리는 여기서 그것을 탐구하지 않습니다.

이제 앱이 완성되었으므로 http://localhost:3000/으로 이동하여 인도 국기를 클릭하면 텍스트가 힌디어로 변경됩니다.

텍스트가 번역되었습니다.

이것으로 우리의 작은 앱이 완성되고 소스 코드here를 찾을 수 있습니다.