[ Goplan ] - React Component 생성

프로젝트 셋팅

create-react-app goplan 프로젝트를 생성.

기본 모듈 설치
yarn add redux react-redux redux-thunk react-router-dom

기능에 집중하기 위해 일단은 Materialize Css 를 사용해 스타일링을 하고 마지막에 scss 를 적용하려고 한다.

폴더 구조

매번 새로운 파일을 작성할 때 마다 반복하는 기초 셋팅 작업을 자동으로 해주는 기능이 있는 익스텐션을 사용해보자

VSC에서 다운로드하고

명령어 rafc 사용으로 컴포넌트 자동 셋팅을 할 수 있다.

ProjectDetail

---

ProjectDetail.jsx

import React from 'react';

const ProjectDetail = () => {
  return <div></div>;
};

export default ProjectDetail;

라우터 연동을 해준다

App.jsx

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Nav />
        <Switch>
          <Route exact path="/" component={Dashboard} />
          <Route path="/project/:id" component={ProjectDetail} />
        </Switch>
      </div>
    </BrowserRouter>
  );
}

export default App;

Props를 받아오는 작업을 해보자

ProjectDetail.jsx

import React from 'react';

const ProjectDetail = props => {
  console.log(props);
  const id = props.match.params.id;
  return (
    <div className="container section project-details">
      <div className="card z-depth-0">
        <div className="card content">
          <span className="card-title">Project Title - {id}</span>
          <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Blanditiis
            esse reprehenderit tenetur fugiat, facilis nemo doloribus porro fuga
            dignissimos hic nisi iure? Inventore deleniti aspernatur vel
            voluptatibus provident non reprehenderit!
          </p>
        </div>
        <div className="card-action gret lighten-4 grey-text">
          <div>Posted by the net NINJA</div>
          <div>2nd September, 2am</div>
        </div>
      </div>
    </div>
  );
};

export default ProjectDetail;

props 콘솔에 띄우면 이렇게 정보를 받아온 것을 확인할 수 있다.

match .params .id 에 해당하는 정보를 컴포넌트에 적용시킨다. (현재 id는 3)

Form State

SignUp

---

라우터 연동

App.jsx

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Nav />
        <Switch>
          <Route exact path="/" component={Dashboard} />
          <Route path="/project/:id" component={ProjectDetail} />
          <Route path="/signin" component={SignIn} />
          <Route path="/signup" component={SignUp} />
        </Switch>
      </div>
    </BrowserRouter>
  );
}

export default App;

SignUp.jsx

class SignUp extends Component {
  state = {
    email: '',
    password: '',
    firstName: '',
    lastName: '',
  };

  handleChange = e => {
    this.setState({
      [e.target.id]: e.target.value,
    });
  };
  handleSubmit = e => {
    e.preventDefault();
    console.log(this.state);
  };
  render() {
    return (
      <div className="container">
        <form onSubmit={this.handleSubmit} className="white">
          <h5 className="grey-text text-darken-3">Sign In</h5>
          <div className="input-field">
            <label htmlFor="email">Email</label>
            <input type="email" id="email" onChange={this.handleChange} />
          </div>
          <div className="input-field">
            <label htmlFor="password">Password</label>
            <input type="password" id="password" onChange={this.handleChange} />
          </div>
          <div className="input-field">
            <label htmlFor="firstName">First Name</label>
            <input type="text" id="firstName" onChange={this.handleChange} />
          </div>
          <div className="input-field">
            <label htmlFor="lastName">Last Name</label>
            <input type="text" id="lastName" onChange={this.handleChange} />
          </div>
          <div className="input-field">
            <button className="btn pink lighten-1 z-depth-0">Login</button>
          </div>
        </form>
      </div>
    );
  }
}

입력한 value가 잘 전달되는 것을 콘솔을 통해 확인할 수 있다.

SignIn

---

App.jsx

<Route path="/signin" component={SignIn} />

signin.jsx

class SignIn extends Component {
  state = {
    email: '',
    password: '',
  };

  handleChange = e => {
    this.setState({
      [e.target.id]: e.target.value,
    });
  };
  handleSubmit = e => {
    e.preventDefault();
    console.log(this.state);
  };
  render() {
    return (
      <div className="container">
        <form onSubmit={this.handleSubmit} className="white">
          <h5 className="grey-text text-darken-3">Sign In</h5>
          <div className="input-field">
            <label htmlFor="email">Email</label>
            <input type="email" id="email" onChange={this.handleChange} />
          </div>
          <div className="input-field">
            <label htmlFor="password">Password</label>
            <input type="password" id="password" onChange={this.handleChange} />
          </div>
          <div className="input-field">
            <button className="btn pink lighten-1 z-depth-0">Login</button>
          </div>
        </form>
      </div>
    );
  }
}

CreateProject

App.jsx

<Route path="/create" component={CreateProject} />

CreateProject.jsx

class CreateProject extends Component {
  state = {
    title: '',
    content: '',
  };

  handleChange = e => {
    this.setState({
      [e.target.id]: e.target.value,
    });
  };
  handleSubmit = e => {
    e.preventDefault();
    console.log(this.state);
  };
  render() {
    return (
      <div className="container">
        <form onSubmit={this.handleSubmit} className="white">
          <h5 className="grey-text text-darken-3">Create Project</h5>
          <div className="input-field">
            <label htmlFor="title">Title</label>
            <input type="text" id="title" onChange={this.handleChange} />
          </div>
          <div className="input-field">
            <label htmlFor="content">Project Content</label>
            <textarea
              id="content"
              className="materialize-textarea"
              onChange={this.handleChange}
            ></textarea>
          </div>
          <div className="input-field">
            <button className="btn pink lighten-1 z-depth-0">Create</button>
          </div>
        </form>
      </div>
    );
  }
}

다음 포스팅 - Firebase 연동하기