오늘은 개념보다는 프로젝트하느라 시간을 많이 쏟았다.
함수명 VS 함수()
<button onClick={function}>추가하기!</button> //...(1)
<button onClick={function()}>추가하기!</button> //...(2)이 두가지를 다르게 볼 줄 알아야 한다.
(1)의 경우는 함수명만을 작성할 때인데, 버튼을 눌렀을 때 (onClick!) 함수 가져오기만 할 뿐이다.
(2)의 경우는 함수() 자체를 작성할 때인데, 버튼을 눌렀을 때 (onClick!) button이 생성되면서 함수자체를 호출하게 된다.
-> 우리가 원하는건 오직 함수를 onClick에 할당하기만을 원하지, 버튼이 생성되는 동시에 호출은 사양하는 부분이다..
map과 filter함수의 리액트로서의 쓰임새
- map함수는 원래 데이터를 가공하여 출력하는 방법이다.
각 요소들만 수정해서 새로운 배열만 반환한다. - filter함수는 조건에 맞는 것만 뽑아낸다.
조건에 맞는 요소들만 뽑아서 새로운 배열을 반환한다.
근본적으로 map, filter등과 같은 함수들은 객체의 불변성을 지키기 위한 함수들이라고 한다.
warning 제거
warning : Each child in a list should have a unique 'key'
-> map 함수를 쓸때는 각각에 대한 유니크한 ID값 같은 것들을 넣어주어야 한다. (요소마다 특정지어주는 느낌)
display : block
개인 프로젝트를 하다보니까 css적인 부분도 생각하는 시간을 갖을 수 있었는데,
display : block의 경우에는 안에 있는 것들을 block으로 만들어서 모두 줄바꿈을 할 수 있게 되었다!
자주 참고할만한 사항인 것 같다.
console.log()의 농간
진짜 얼탱이가 없는 현상이다.
const [todo, setTodo] = useState([
{id : 1, title : 'react 마스터!', content : '리팩토링 많이 해보기', isDone : false},
{id : 2, title : 'next.js 마스터!', content : '리액트 빨리 끝내기', isDone : false},
{id : 3, title : 'flutter 마스터!', content : '웹 개발 완벽하게 마무리하고 시작!', isDone : false}
])
const doneTodo = [...todo];
console.log(doneTodo);
console.log(todo);
todo[0].title = 'rlaehdcks';
console.log(doneTodo);
console.log(todo);깊은 복사 / 얕은 복사를 했을 때 변경 전,후, 원본, 사본 총 4개가 모두 똑같이 콘솔값이 찍히는 것이다.
띠용?
말이 되나, 스프레드 신텍스가 어려운게 아닌데.
해결
콘솔.로그의 농간이었다.
진짜 진짜 어이가 없는데,
콘솔은 가장 가까운 변경사항을 모두 참조한다는 뜻이었다.
객체를 로깅할 때는 객체의 내용 변경사항이 실시간으로 업데이트 된다는 것이다.
예를 들어, arr을 로깅하지 말고 (arr은 배열 객체이므로) arr.length를 로깅하는 식으로 방법을 바꿔서 콘솔값을 찍어보아야 한다.
