[React] 리액트로 프로젝트 만들기

이 블로그는 한입 크기로 잘라먹는 리액트 강의를 듣고 복습하기 위해 작성되었습니다!

목차

1. 리액트 프로젝트 초기화

2. useState로 사용자 입력 처리

3. 여러 state 한번에 관리하기

 

1. 프로젝트 초기화

프로젝트를 처음 만드는 과정입니다.

 

1. 만들고 싶은 위치에 프로젝트 이름으로 폴더 만들기

 

2. Create-React-App으로 초기화하기

npx create-react-app [프로젝트 이름]

(npx가 설치되어있지 않다면 아래 명령어로 따로 설치해야 합니다)

npm install npx -g

 

3. 디렉토리, 파일 정리

위의 명령어로 설치할 경우 [프로젝트명]->[프로젝트명]->[파일들] 이런식으로 디렉토리 구조가 생기므로,

[프로젝트명]->[파일들] 이렇게 되도록 파일들을 옮기고, 디렉토리 하나를 지워줍니다.

 

필요없는 파일까지 지우고 나면, 초기화가 끝납니다.

컴포넌트를 만들어 사용해보겠습니다.

 

const DiaryEditor = () => {
  //리턴 div의 클래스네임을 컴포넌트 이름과 같게!!
  return <div className='DiaryEditor'>다이어리</div>;
};
export default DiaryEditor;

DiaryEditor.js 파일을 만든 뒤, 같은 이름의 컴포넌트를 만듭니다.

이 컴포넌트의 return에 렌더링하고 싶은 것을 html 형식으로 씁니다.

이때, 최상위 div의 클래스명을 컴포넌트 이름과 동일하게 합시다.

 

이렇게 html태그로 반환되고 export되어 화면에 올라가는 함수를 컴포넌트라고 합니다.

이걸 App.js에서 받아서 화면에 띄워보겠습니다.

import './App.css';
import DiaryEditor from './DiaryEditor';
 
function App() {
  return (
    <div className='App'>
      <h2>일기장</h2>
      <DiaryEditor />
    </div>
  );
}
 
export default App;

컴포넌트 트리 최상위에 있는 App 컴포넌트입니다.

DiaryEditor 컴포넌트를 불러와, return에 띄웠습니다. 이렇게 하면 h2와 같이 브라우저에 렌더링이 됩니다.

 

useState로 사용자 입력 처리

작성자 입력 부분을 input으로 만들어보겠습니다.

 

1. useState 모듈을 임포트합니다.

import { useState } from 'react';

2. 컴포넌트 안에 state를 선언합니다.

const [author, setAuthor] = useState('');

저는 state이름을 author, setState 함수 이름을 setAuthor로 만들었습니다.

해당 state 상태를 author, setState를 setAuthor라고 부르겠습니다.

 

3. return 속 input 태그 안에다 author를 value 속성으로 전달

<input value={author}/>

이렇게 되면 setAuthor 함수가 아닐 시 author의 상태는 절대 변하지 않습니다.

input 부분에다 키보드를 눌러도 글이 써지지 않습니다.

 

4. input의 onChange 속성으로 setAuthor 넣기

<input
  value={author}
  onChange={(e) => {
    setAuthor(e.target.value);
  }}
/>

e.target.value는 사용자 키보드 입력값입니다.

이걸 반영하면 input 속성이 이렇게 됩니다.

 

3. 여러 state 한번에 관리하기

일기 내용의 경우는, state로 관리하고 textarea 태그를 사용합니다.

다만 두 state는 하는 일이 같기 때문에 두 state를 객체로 만들어 한번에 관리합시다.

 

1. state 선언

const [state, setState] = useState({
    author: '',
    contents: '',
  });

 

2. return의 author

<div>
  <input
    value={state.author}
    onChange={(e) => {
      console.log(e.target.value);
      setState({
        ...state,
        author: e.target.value,
      });
    }}
  />
<div>

setState의 contents는 state.contents로 받아올 수도 있지만,

직접 이벤트로부터 받지 않기 때문에 spread 연산자로 먼저 처리하고 author정보를 다시 받았습니다.

 

3. contents

<div>
  <textarea
    value={state.contents}
    onChange={(e) => {
      setState({
        ...state,
        contents: e.target.value,
      });
    }}
  />
</div>

contents에서는 author를 state.author로 받아올 수도 있지만,

이것도 직접 이벤트에서 받지 않기 때문에 spread 연산자로 먼저 처리하고 contents를 받았습니다.

 

추가) 코드 정리

근데 이렇게 쓸 경우, 비슷한 코드를 두번씩 써야 해서 번거롭습니다.

겹치는 부분을 handleChangeState로 만들어봅시다.

 

  const handleChangeState = (e) => {
    setState({
      ...state,
      [e.target.name]: e.target.value,
  });

e.target.name은 우리가 state를 선언했을 때 쓴 프로퍼티의 키 이름입니다.

setState에서 state를 먼저 spread하고,

괄호표기법을 사용해 사용자가 가리키는 부분의 값을 바꾸도록 만들 수 있습니다.

<div>
  <input
    name='author'
    value={state.author}
    onChange={handleChangeState}
  />
</div>
<div>
  <textarea
    name='contents'
    value={state.contents}
    onChange={handleChangeState}
  />
</div>

다 됐으면 return에서 onChange를 모두 handleChangeState로 설정하면 됩니다.

 

 

 

참고)

select로 emotion부분을 만들고 저장부분 간단하게 추가한

DiaryEditor.js 전체코드

import { useState } from 'react';
 
const DiaryEditor = () => {
  const [state, setState] = useState({
    author: '',
    contents: '',
    emotion: 1,
  });
 
  const handleChangeState = (e) => {
    setState({
      ...state,
      [e.target.name]: e.target.value,
    });
  };
  const handleSubmit = (e) => {
    console.log(state);
    alert('저장 성공');
  };
  return (
    <div className='DiaryEditor'>
      <h2>오늘의 일기</h2>
      <div>
        <input
          name='author'
          value={state.author}
          onChange={handleChangeState}
        />
      </div>
      <div>
        <textarea
          name='contents'
          value={state.contents}
          onChange={handleChangeState}
        />
      </div>
      <div>
        <select
          name='emotion'
          value={state.emotion}
          onChange={handleChangeState}>
          <option value={1}>1</option>
          <option value={2}>2</option>
          <option value={3}>3</option>
          <option value={4}>4</option>
          <option value={5}>5</option>
        </select>
      </div>
      <div>
        <button onChange={handleSubmit}>일기 저장</button>
      </div>
    </div>
  );
};
export default DiaryEditor;

 

App.css

.DiaryEditor {
  border: 1px solid gray;
  text-align: center;
  padding: 20px;
}
 
.DiaryEditor input,
textarea {
  margin-bottom: 20px;
  width: 500px;
  padding: 10px;
}
 
.DiaryEditor textarea {
  height: 150px;
}
 
.DiaryEditor select {
  width: 300px;
  padding: 10px;
  cursor: pointer;
}