React : (2) 간단한 todo List 만들기 - 1 (with useState())

React: (1)에서 설치한 프로젝트에서 바로 Todo List를 만들어보기

이전에 포스팅한 프로젝트에 바로 Tood List를 만들어보겠음

이전 환경 그대로이기 때문에 추가로 설치할 것은 없음

앞서 나가기 전에

리액트에는 클래스형 컴포넌트와 함수형 컴포넌트가 있다
이 두 가지의 차이점은 다음 포스팅에서 자세히 아는대로 기술해보도록 하겠다
오늘은 리액트를 설치해보고 리액트로 간단한 Todo List를 만드는 것이 목표!
함수형 컴포넌트와 상태 관리를 위해 Hooks 를 사용하여 만들어보겠다

App.js 에서 ListComponent를 불러오기

import './App.css';
import ListComponent from './ListComponent';

const App = () => {
  return <ListComponent />;
};

export default App;

어려울 것 없다. 세팅이 이미 되어 있는 App.js에서 하나의 컴포넌트만 실행할 것이기 때문에 간단하게 작성해준다. 이름이 구린 것 같다.

ListComponent.js 생성

import React from "react";

const ListComponent = () => {}

새로 생성한 파일에도 이렇게 import 구문으로 만들어줘야 한다. 리액트를 사용할 것이기 때문.
이제 이렇게 저장하면 바로 에러가 뜬다.
export 'default' (imported as 'ListComponent') was not found in './ListComponent' (module has no exports)

export default ListComponent;

순서대로 작성을 해왔다면 요 에러 문구가 뜨는 것이 정상이다. 선언하기 전까지는 빈 문서이기 때문에 에러에 잡히지 않지만 const 로 ListComponent를 선언하는 순간 바로 내보내기 기본값을 참조하라고 나온다.

간단하게 마크업 하기

나는 초간단으로 만들며 리액트의 맛보기를 해볼 예정이니 입력, 추가, 삭제까지만 만들어보겠다.
계속해서 이 파일에 마크업을 해주면 된다.

return (
        <div>
            <form>
                <input
                    type="text"
                    name="list"
                    placeholder="오늘 할 일을 입력해주세요"
                    value=""
                    onChange={}
                />
                <button type="submit">추가</button>
            </form>
            <h4>오늘 할 일 😁</h4>
            <ul></ul>
        </div>
    )

리액트의 마크업이 신기한 점이 있다. js에 파일에 마크업을 한다는 것도 신기한데, 예전에 제이쿼리로 html 붙여넣기 노가다 한 것에 비하면 상대적으로 너무 쉽고 좋아보인다.
1. <input />의 속성을 써줄 때는 우리가 그동안 해오던 마크업처럼 천천히 있는대로 나열하면 된다.
2. 이벤트 메서드는 캐멀케이스만! 나처럼 webstorm 을 쓰면 엔터 탁탁쳐대며 자동완성 하면 못 보고 지나갈 디테일이다.
여기까지는 일반 마크업과 다른 점이 크게 없다.

간단하게 알고 넘어갈 개념 Hooks

절~대 간단하지 않지만 오늘 Todo List를 만들기 위해서 간단하게라도 알아야 한다.
Hooks 은 리액트에 새로 도입된 기능으로 함수형 컴포넌트 즉 내가 지금 만들고 있는 이 구조에 상태관리와 렌더링 직후의 작업등을 다양하게 할 수 있도록 해주는 기능을 의미한다.
여기에는 useState, useEffect 등이 있지만 오늘은 useState와 useRef만으로 아주 간단하게 만들어볼거다.

useState

사용법: import 구문에

import React, {useState} from 'react'

를 써주면 된다.
useState()는 상태 관리를 위해 사용된다.
state를 아주 쉽게 쉽게 생각하면 값이 변할 때 렌더링이 일어나는 변수다.
이걸 어떻게 사용하나?

const [state, setState] = useState(초기값);

당황할 거 없다... 두 번째 보는거지만 정말 당황스럽긴 하다.
이 문법은 배열비구조화 할당문법인데
앞에 state 라는 원소는 상태값
뒤에 setState 라는 원소는 상태를 설정하는 함수다.
이전에 js 포스팅에서 요약한 매개변수(=파라미터)와 그 함수를 초기화 해준 상태라고 보면 된다.

뒤에 useState() 에는 초기값을 설정해줄 수 있고 0, '' 등 원하는 타입에 따라
초기화 해줄 값을 집어 넣으면 된다. 구조가 낯설긴 하지만 사실 알고 있는 개념이다.
파라미터를 넣어서 호출을 하게 되면 전달받은 값으로 바뀌고 이 컴포넌트가 정상적으로 렌더링된다.

상태관리를 해보자

const [input, setInput] = useState('');

ListComponent 안에 위와 같이 초기화를 해준다.
나는<input />에 입력한 value 를 받기 위해서 위와 같이 작성해보았다.
<input />에 아까 비워둔 value 속성에는 value={input}이라고 작성해주면 된다.
setInput은 내가 설정한 함수 이름인데, todo list에서 추가 버튼을 눌렀을 때 <input /> 상태를 초기화 해줄 수 있다.

이제 <input />을 가지고 todo list를 만들어야 하는데 리액트에서
document.getElementById() 처럼 Dom 을 선택하는 방법을 알고 이것을 어떻게 다룰지에 대해 알아보아야 한다.

포스팅이 길어져서 다음 2편에 특정 Dom을 선택하는 ref()를 다뤄보도록 하겠다.