ToDoList Web(1)

🎈 프로젝트 환경 설정

1. create-react-app todolist
2. yarn add sass-loader node-sass classnames
   • 오류 발생 시 sass의 버전 맞춰주기. uninstall -> install @~
3. yarn add open-color

src/styles/utils.scss
@import '~oen-color/open-color';

4. 메인 스타일 설정

src/styles/main.scss
@import './utils';
body{
    background: $oc-gray-1;
    margin: 0px;
}

5. index.js, App.js 작성.
6. yarn start

🎈 UI 디자인 및 구성

🎁 컴포넌트 계획

1. PageTemplate : UI의 전체적인 틀을 설정.
2. TodoItem : 일정을 추가하는 input + button.
3. TodoItem : 일정을 렌더링.(체크:줄, 제거:제거)
4. TodoList : 데이터 배열을 렌더링.

🎁 1. PageTemplate

src/components/PageTemplate/PageTemplate.js

import styles from './PageTemplate.scss
import classNames from 'classnames/bind'

const cx = classNames.bind(styles);

const PageTemplate = ({children}) =>{
  return(
    <div className={cx('page-template')}>
    	<h1>일정 관리</h1>
		<div className={cx('content')}>
                        {children}
		</div>
	</div>
	);
};

src/commponents/PageTemplate/PageTemplate.scss

.page-template{
    margin-top: 5rem;
    margin-left:auto;
    margin-right:auto;
    width:500px;
    background: white;
    //그림자를 띄워줌.
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    padding-top:2rem;

    @media(max-width: 768px){ // 웹 브라우저의 크기가 768 미만일 때는
        margin-top: 1rem;
        width: calc(100% - 2rem); //양 옆에 1rem의 여백을 남기고 꽉 채움.
    }
    h1{
        text-align: center;
        font-size: 4rem;
        font-weight:300;
        margin:0;
    }
    .content{
        margin-top:2rem;
    }
}

🎁 2. TodoInput 컴포넌트 생성

src/components/TodoInput/TodoInput.js

const toDoInput = ({value, onChange, onInsert}) =>{
    const handleKeyPress =(e) =>{
        if(e.key ==='Enter'){
            onInsert();
        }
    }

return(
    <div className = {cx('todo-iput')}>
        <input onChange={onChange} value={value} onKeyPress={handleKeyPress}/>
        <div className = {cx('add_button')} onClick={onInsert}>추가</div>
    </div>
);
}

• toDoInput 함수
• Enter를 눌렀을 때와 추가 버튼을 눌렀을 때의 기능을 같게만듬.

🎁 3. TodoItem 컴포넌트 생성

src/components/TodoItem/TodoItem.js

render(){
        const{done, children, onToggle, onRemove} = this.props;
  /* 비구조화 할당 문법으로 props 안의 값들의 레퍼런스 만듬*/

        return(
            <div className={cx=('todo-item')} onClick={onToggle}>
                <input className={cx=('tick')} type="checkbox" checked={done} readOnly/>
                <div className={cx('text', {done})}>{chilldren}</div>
                <div className={cx('delete')} onClick={onRemove}>[지우기]</div>
            </div>
        );
    }
    

🧨 나중에 성능을 최적화하기 위해 shouldComponentUpdate 라이프사이클을 사용할 것이기에 class문법으로 ~

• 비구조화 문법을 사용하면 this.props.onYoggle -> onToggle
• input을 렌더링할 때는 체크 박스를 렌더링 해야 하므로 type=checkbox
• readOnly=true인 이유는 체크의 활성화 or 비활성화가 상위 요소인 div 요소의 클릭 이벤트로 관리될 것이기 때문.
• onClick 요소가 두개가 존재하기 때문에 오류 발생. -> 추후 수정

참고 : <리액트를 다루는 기술>