To Do List 웹 프로젝트-Todo 글자색 하이라이트 추가하기2

https://foxtrotin.tistory.com/232

To Do List 웹 프로젝트-글자색 추가

여기에서 이어집니다

 

이제 이렇게 글자에 색을 넣어봅시다

 

1. handleCreate에서 새 Todo를 만들 때 color값을 집어 넣도록 한다

        return (
            <PageTemplate form={<TodoInput
                onChange={handleChange}
                value={input}
                onKeyPress={handleKeyPress}
                onCreate={handleCreate}
                color={color}
            />}
            palette={<Palette colors={colors} selected={color} onSelect={handlePalette}/>}>
            
            <TodoItemList todos={todos} onToggle={handleToggle} onRemove={handleRemove}/>
            </PageTemplate>
        );

저번에 App.js에서 PageTemplate의 form에다가 color를 넣어주었습니다

이 form은 TodoInput.js에 넘어갈테니까 TodoInput.js에서도 color props를 추가해 줍니다

 

import React from 'react';
import './TodoInput.scss';

const TodoInput = ({value, onChange, onCreate, onKeyPress, color})=>{
    return(
        <div className="form">
            <input value={value} onChange={onChange} onKeyPress={onKeyPress} style={{color}}/>
            <div className="create-button" onClick={onCreate}>
                추가
            </div>
        </div>
    )
}

export default TodoInput;

버튼을 누르면 onCreate가 실행되는데 onCreate라는 이름으로 넘어온 handleCreate는 App.js에 있습니다

 

    handleCreate=()=>{
        const{input, todos, color}=this.state;
        this.setState({
            input: '', //인풋을 비운다
            todos: todos.concat({ //concat으로 배열에 추가한다
                id: this.id++,
                text: input,
                checked: false,
                color
            })
        });
    }

Todo아이템을 만드는 App.js의 handleCreate에다가 color값을 추가합니다

 

2. Form의 Input텍스트가 현재 선택된 색으로 보이게 한다

이렇게 input에다가도 색을 보여주는 기능입니다

 

위에서 App.js의 form에다가 color값을 추가하면서 TodoInput.js에도 color항목을 넣었습니다

style={{color}} 이 부분 때문에 input 태그 뒤에 스타일이 붙으면서 글자색이 바뀌어서 나오게 됩니다

 

3. TodoItem이 렌더링 될 때 텍스트를 주어진 색으로 보이게 한다

handleCreate로 만들어진 todos는 App.js의 render()부분에서 아래 코드로 인해 TodoItemList컴포넌트의 props로 넘어갑니다

<TodoItemList todos={todos} onToggle={handleToggle} onRemove={handleRemove}/>

그러면 TodoItemList에서도 color를 반영하도록 해 주어야 합니다

 

import React, { Component } from 'react';
import TodoItem from '../TodoItem/TodoItem';

class TodoItemList extends Component {
    render() {
        const { todos, onToggle, onRemove, color } = this.props;

        const todoList = todos.map(
            ({id, text, checked, color}) => (
              <TodoItem
                id={id}
                text={text}
                checked={checked}
                onToggle={onToggle}
                onRemove={onRemove}
                key={id}
                color={color}
              />
            )
          );
        
        return (
            <div>
                {todoList}
            </div>
        );
    }
}

export default TodoItemList;

리스트에 반영하는 것은 간단합니다

편의를 위해 const로 미리 this.props를 붙여주는 부분에 color을 추가해 주고,

map으로 TodoItem컴포넌트 배열이 만들어질 때 color값도 같이 넘겨주기만 하면 됩니다

 

TodoItem에서도 넘어오는 color값을 넣어주는 코드를 추가합니다

import React, { Component } from 'react';
import './TodoItem.scss';

class TodoItem extends Component {
    shouldComponentUpdate(nextProps, nextState) {
        return this.props.checked !== nextProps.checked;
    }
    
    render() {
        const { text, checked, color, id, onToggle, onRemove } = this.props;

        return (
            <div className="todo-item" onClick={() => onToggle(id)}>
                <div className="remove" onClick={(e) => {
                    e.stopPropagation(); //onToggle이 실행되지 않도록
                    onRemove(id)}
                }>&times;</div>
                <div className={`todo-text ${checked && 'checked'}`} style={{color}}>
                    <div>{text}</div>
                </div>
                {
                    checked && (<div className="check-mark">✓</div>)
                }
            </div>
        );
    }
}

export default TodoItem;

const에 color를 추가하고, todo-text div가 생성될 때 style값으로 해당 color를 가지고 만들어지도록 넣어 줍니다

 

색깔이 잘 넣어집니다

 

 

여기까지 전체 코드는 깃허브->https://github.com/proqk/TodoList

proqk/TodoList