과제
state를 가진 input 입력안됨
<input
type='text'
value={title}
onChange={(event) => titleAddHandler(event)}
></input>해당 태그에서 onChange를 넣지 않고 value까지만 지정해두면 입력이 안되는 현상이 나타난다.
const titleAddHandler = (event) => {
console.log(event)
setTitle(event.target.value)
}onChange에 이벤트만 넘겨봤을 때에는 변경이 되지 않았지만, setTitle를 해주었을 때 입력이 잘 되었다.
-> value 속성만 지정하면 value 속성으로만 값을 다루는 권한이 있기 때문에 input 안에 값이 입력되지 않는다.
즉, 사용자가 값을 입력하는 권한이 없기 때문이다.
Uncaught Error: Objects are not valid as a React child (found: object with keys {id, work, content}). If you meant to render a collection of children, use an array instead.
원인
타입이 맞지 않는 것을 지정해서 그런 것이였다.
const clickAddButtonHandler = () =>{
const newWorking = {
id: working.length +1,
work: working,
content: content,
}
setworking([...working, newWorking]);
};work에 입력된 title을 넣어주어야 했는데 객체를 넣고 있어서 오류가 발생한 것이였다.
solution
work: title로 변경해주니 해결되었다.
추가하기 수행 후 다시 원상복귀
추가하기를 수행하면 리랜더링이 되고 방금 추가하기를 했던 내용이 지워진다.
-> form 태그로 묶어져 있던 입력칸을 div로 묶어주니 해결되었다.
Form 태그 사용하기
입력을 form 태그로도 사용하기 위해 원인을 생각해보았다.
form 태그에는 기본적으로 새로고침 동작이 있기 때문에 새로 입력한 것이 나타나지 않는 것이였다.
event.preventDefault(); 를 clickAddButtonHandler에 추가해주고 form태그에 onsubmit을 넣어주고 버튼의 이벤트는 지워 주었다.
<form className='addform' onSubmit={clickAddButtonHandler}>
<label>제목</label>
<input
type='text'
value={title}
onChange={(event) => titleAddHandler(event)}
></input>
<label>내용</label>
<input
type='text'
value={content}
onChange={(event) => contentAddHandler(event)}
></input>
<button
>추가하기</button>
</form>입력 후 빈칸 만들어주기
form 태그의 기본동작인 새로고침을 방지 해주었더니 입력해둔 값이 그대로 존재한다.
clickAddButtonHandler에 setTitle(''); 와setContent(''); 를 추가해서 입력되면 입력동작을 하고 set으로 빈칸으로 초기화 해주었다!
상태에 따라 working 혹은 done구간에 다르게 렌더링 하게 만들기
working -> 완료버튼(isDone이 false인 상태)
done -> 취소버튼(isDone이 true인 상태)
기본동작을 다음과 같이 변경해둔다.
working 구간에는 filter를 사용하여 isDone이 false인 값들만 return하고 Done 구간에는 true인 것들만 return 한다.
{ working.filter((work) => { return work.isDone === false }).map((item) => { return ( <div key={item.id} className='todo-box'> <h2 className='work-title'>{item.work}</h2> {item.content} <div className='buttons'> <button className='delete' onClick={() => clickDeleteButtonHandler(item.id)}>삭제하기</button> <button className='complete' onClick={() => clickCompleteButtonHandler(item.id)}>완료</button> </div> </div> ) }) }
각 버튼이 클릭하면 다음과 같이 동작한다.
id를 매개변수로 map함수를 동작하는데 이 때, 담겨져있는 할일의 id와 매개변수로 받은 id가 같다면 isDone을 true 변경하고 다시 set 해준다.
const clickCompleteButtonHandler = (id) => { const updateWokrings = working.map((work) => { if(work.id === id) { return {...work, isDone: true}; } return work; }); setworking(updateWokrings); }
컴포넌트 분리하기
Cannot read properties of undefined
버튼 컴포넌트 분리도중 발생한 에러, form 태그의 버튼에 새로 생성한 컴포넌트를 적용하니 다음과 같이 에러가 발생했다.
const Button = (props) =>{
console.log(props);
return <button className={props.role} onClick={() => props.fnc(props.para.id)}>{props.name}</button>
};버튼 태그에서는 id를 사용하지 않아서 찾을 수 없기 때문에 에러가 발생한 것이였다.
좀 더 반복적인 '기능'을 분리해야 할 것 같다.
Git flow
브랜치 관리 전략/방법론
항상 유지되는 메인 branch
master(main)
출시할 수 있는 branch
X.0 - 프로젝트 추가시
1.X - 기능 추가시
develop
다음 출시 버전을 개발하는 브랜치
master로부터 시작하고 버그 수정한 커밋들이 추가된다.
일정 기간만 유지되는 보조 branch
feature
기능 개발하는 branch
develop에서 갈라져 나온 것이다.
git pull --rebase origin devlop을 이용하여 마지막에 반영된 develop에서 갈라져 나온 것 처럼 보이게 한다.
작업이 완료되면 merge
feature -> develop
release
이번 출시 버전을 준비하는 branch
배포 직전 QA 수정, 진행하면서 발생한 버그들은 release에 수정된다.
QA를 받고 나면 develop과 master에 push한다.
완료되면 merge
release -> master, develop
hotfix
출시 버전에서 발생한 버그를 수정하는 branch
수정하면 develop과 master에 push
