컴포넌트 준비하기

우리는 다음과 같은 구성으로, 컴포넌트를 만들어보겠습니다.

App 컴포넌트 내부에 LeftPane 과 RightPane 라는 컴포넌트를 만들고, 한쪽에는 값을 설정시킬 Sends 컴포넌트, 그리고 반대쪽에는 Receives 컴포넌트를 넣어주겠습니다.

그리고, App 에서부터 아래로 props 를 전달하는 것이 아닌, Context 를 통해서 바로 가져와서 사용해보겠습니다.

CSS 클래스 작성하기

컴포넌트 구분을 시각적으로 쉽게 할 수 있도록 스타일을 조금 작성해주겠습니다. 다음 내용을 index.css 에서 작성하세요.

`src/index.css`

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.panes {
  display: flex;
}

.pane {
  flex: 1;
  border: 1px solid black;
  padding: 1rem;
  margin: 1rem;  
}

그 다음에, 각 컴포넌트를 만들어주겠습니다. 아직은 Context 연동을 하지 않은 상태입니다.

이번에 만들 컴포넌트들은 모두 src/components 디렉토리에 위치시키세요.

`src/components/Sends.js`

이 컴포넌트에서는 값을 설정시킬 form 을 만들어주겠습니다.

import React, { Component } from 'react';

class Sends extends Component {

  state = {
    input: ''
  }

  handleChange = (e) => {
    this.setState({ input: e.target.value });
  }

  handleSubmit = (e) => {
    e.preventDefault();
    // 구현 예정
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input value={this.state.input} onChange={this.handleChange}/>
        <button type="submit">설정</button>
      </form>
    );
  }
}

export default Sends;

`src/components/Receives`

이 컴포넌트에서는 나중에 값을 받아와서 보여줄 것입니다.

import React from 'react';

const Receives = () => {
  return (
    <div>
      현재 설정된 값: 
    </div>
  );
};

export default Receives;

`src/components/LeftPane.js`

왼쪽에 보여줄 컴포넌트를 만듭니다. 여기선 Sends 를 보여주고,

import React from 'react';
import Sends from './Sends';

const LeftPane = () => {
  return (
    <div className="pane">
      <Sends />
    </div>
  );
};

export default LeftPane;

`src/components/RightPane.js`

우측에 보여질 컴포넌트에서는 Receives 를 보여줍니다.

import React from 'react';
import Sends from './Sends';

const RightPane = () => {
  return (
    <div className="pane">
      <Sends />
    </div>
  );
};

export default RightPane;

`src/App.js`

마지막으로는 LeftPane 과 RightPane 을 보여주는 일만 남았습니다.

import React from 'react';
import LeftPane from './components/LeftPane';
import RightPane from './components/RightPane';

const App = () => {
  return (
    <div className="panes">
      <LeftPane />
      <RightPane />
    </div>
  );
};

export default App;

자~ 이제 컴포넌트를 준비하는 작업이 끝났습니다. 브라우저에서 다음과 같은 화면이 나타나는지 확인하세요.

컴포넌트 준비하기