[React]내 멋대로 만드는 Todolist-2(feat.Parcel)

JSX로 마크업을 하고 props와 state를 활용하기

1.JSX로 마크업하기(app.js)

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

class ReactTodo extends React.Component {
  render() {
    return (
      <div className="container">
        <div className="head-area">
          <h1>React To do list</h1>
        </div>
        <div className="input-area">
          <input type="text" text=""/>
          <button>추가</button>
        </div>
        <div className="list-area">
          <ul>
            <li><span>할일 목록1</span> <button className="del">삭제</button><button className="edit">편집</button></li>
            <li><span>할일 목록2</span> <button className="del">삭제</button><button className="edit">편집</button></li>
            <li><span>할일 목록3</span> <button className="del">삭제</button><button className="edit">편집</button></li>
            <li><span>할일 목록4</span> <button className="del">삭제</button><button className="edit">편집</button></li>
          </ul>
        </div>
      </div>
    )
  }
}

var app = document.getElementById("app");
ReactDOM.render(<ReactTodo name="Kimik" />, app);

이전 포스트에서 작성했던 app.js의 내용을 위와같이 수정했습니다. JSX는 Javascript 내에서 HTML을 마크업하는 형식으로, 문법은 기존 HTML과 같지만 javascript 내에서 사용되는 class나 let const 등은 사용하면 안되므로, HTML의 class는 className으로 바꿔서 입력해야합니다.

 

그리고 3번째 line에 scss 파일이 추가되었습니다. parcel 덕분에 원하는 경로에서 scss를 import해서 사용하면 build시 알아서 css로 컴파일됩니다. 

 

*TIP : JSX는 js파일로 수정하기때문에 emmet이 동작하지 않습니다. JSX에서 emmet을 사용하시려면 VScode의 경우엔 command+shift+p > Open setting  (JSON) > USER STTINGS부분에 

 

 

emmet.includeLanguages": {
	"javascript": "javascriptreact"
},
"emmet.triggerExpansionOnTab": true,

이렇게 작성해주시면됩니다. 만약 안되신다면 구글에서 "사용에디터 jsx emmet"을 검색하세요~

 

여기까지의 작업은 https://github.com/kimik-hyum/react-todo/tree/JSX-markup 에 올려두었습니다.

 

이쯤에서 아래와같이 결과화면이 잘 나오는지 확인해봅니다.

 

 

2. component 나누기 

 

이 todoList는 크게 입력창/리스트화면 두가지로 구성되어있으므로, 이 두가지를 컴포넌트화 해서 처리하도록하겠습니다.

 

 

저는 src폴더아래에 component라는 폴더를 생성하여 input.js(입력하는부분)과 todo.js(리스트부분)을 만들었습니다.

 

input.js는 아래와같이 입력하고,

import React from "react";

class TodoInput extends React.Component {
    render () {
        return (
          <div className="input-area">
              <input type="text" text=""/>
              <button>추가</button>
          </div>
        );
    }
}
export default TodoInput;

 

todo.js는 아래와같이 입력했습니다.

import React from "react";

class TodoList extends React.Component {
    
    render () {
        return (
          <li><span>할일 목록2</span> <button className="del">삭제</button><button className="edit">편집</button></li>
          <li><span>할일 목록3</span> <button className="del">삭제</button><button className="edit">편집</button></li>
          <li><span>할일 목록4</span> <button className="del">삭제</button><button className="edit">편집</button></li>
        );
    }
}
export default TodoList;

 

마지막 export로 해당 파일들을 출력(?)해주면, app.js는 export한 내용을 import하여 사용할 수 있게됩니다.

 

app.js의 상단을 아래와 같이 수정하고,

import React from "react";
import ReactDOM from "react-dom";
import TodoInput from './component/input';
import TodoList from './component/todo';
import './scss/App.scss';

render부분의 jsx를 아래와 같이 수정하겠습니다.

render() {
    return (
      <div className="container">
      	<div className="head-area">
      		<h1>React To do list</h1>
      	</div>
      	<TodoInput />
      	<TodoList />
      </div>
    )
  }
  

 

그럼 입력하는 부분인 input.js와 todoList를 보여줄 todo.js로 컴포넌트가 나누어졌습니다.

 

여기까지의 내용은 https://github.com/kimik-hyum/react-todo/tree/Component-+-style

 

3. props와 state로 배열을 이용한 목록만들기

 

일단 입력한 내용이 리스트에 보여지기전에, 리스트의 내용을 특정 배열을 통해 만들어지도록 수정하고, 그 과정에서 props와 state를 활용해보도록하겠습니다.

 

class ReactTodo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      todo:[
        {text:"할일목록1",check:false},
        {text:"할일목록2",check:false}
      ]
    }
  }
  render() {
    return (
      <div className="container">
        <div className="head-area">
          <h1>React To do list</h1>
        </div>
        <TodoInput />
        <TodoList list={this.state.todo}/>
      </div>
    )
  }
}

constructor(생성자 함수)에서 state를 선언하고, todo라는 state를 만들어서 리스트에 들어갈 내용인 text와 check라는 변수를 넣어주도록 합시다 (check는 나중에 해야할 목록에서 완료체크를 하기위해 사용할것입니다.) 

그리고 리스트를 보여줄 <TodoList> 컴포넌트에 props로 state에서 만든 todo값을 넘겨줍니다.

 

그럼 넘겨진값을 todo.js에서 활용해야겠죠?

 

todo.js를 아래와같이 수정합니다.

class TodoList extends React.Component {
    
    render () {
        const {list} = this.props;
        return (
            <div className="list-area">
                <ul>
                    {list.length && list.map(({text,check},index) => 
                        <li><span>{text}</span> <button className="del">삭제</button><button className="edit">편집</button></li>
                    )}
                </ul>
            </div>
        );
    }
}

es6의 map을 활용하여 props로 넘겨받은 배열에 text와 check값을 li에 담았습니다.

이제 app.js에 state.todo 배열이 변경되면 props를 거쳐 todo.js에 li의 값이 바뀌도록 설정되었습니다!

 

다음 포스트에서는 setState를 통해 state값을 변경하여, 우리가 선언한 state.todo의 배열을 추가하고 state가 변경됨과 동시에 브라우저가 렌더링 되는것을 보여드리도록하겠습니다. 역시 일주일(5월 2일)전에는 다음 포스트를 올리도록하겠습니다.

 

여기까지의 내용은 https://github.com/kimik-hyum/react-todo/tree/props-state