맨동이

hover시 살짝 올라가는 버튼UI를 만들어보자. 실행 결과 body { background-color:lightgrey; display:flex; align-items:center; height:300px; } button { cursor: pointer; color: black; width: 300px; height: 30px; display: block; margin: 0 auto; border: solid 1px black; background-color: whitesmoke; border-radius: 5px; box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); transition: all 0.3s ease 0s; } button:hover { background-c..

React가 불변성을 지키는 이유 React가 불변성을 지키는 이유는 부모컴포넌트가 re-rendering 되거나 state,props가 변화될 때 렌더링이 일어나게 된다. 근데 렌더링을 할지 말지 판단하기 위해 state가 변화되는지를 판단한다. 그 과정에서 state 객체 내의 모든 value를 다 깊은 비교하면 당연하게도 효율적이지 않다. 그렇기 때문에 이전 객체와 현재 객체를 얕은 비교로 판단하기 때문에 불변성의 유지가 중요하다. state를 직접 변경하게 되면 value 값은 바뀌지만 참조 값은 바뀌지 않으므로 렌더링이 일어나지 않는다. mutable한 상태를 사용하게 되면 리액트 돔이 제대로 된 추적을 할 수 없을 것이고, 예기치 않은 사이드 이펙트를 발생시킬 수 있다. 어떻게 불변성을 지킬까..

Reduce 메서드란? reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서 함수를 실행하고, 하나의 결과값을 반환한다. map과 forEach 와는 조금 다른 누산값을 곁들인 메서드이다. 문법 // reduce const array1 = [10, 20, 30, 40]; array1.reduce((누산값, 현재요소값, 현재요소의index, 현재배열) => { return 다음누산값; }, 초기누산값); reduce 메서드 자체의 반환값은 100이 된다. 1. 콜백 함수 콜백 함수의 첫 번째 파라미터는 reduce 메서드에서 이 콜백 함수가 동작할 때 return 하는 값이 다음 콜백 함수의 첫 번째 파라미터로 전달되는 것이다. 배열의 요소를 다 돌고 마지막 콜백 함수가 동작한 이후의 return..

Each child in an array should have a unique “key” prop. 배열을 사용하는데 key 값을 까먹고 넣지 않으면 더보기 Each child in an array should have a unique “key” prop. 콘솔창에서 위와 같은 문구를 볼 수 있다. 바로 유니크한 key 값이 필요하다는 것! Key값이 왜 필요한가 ? 첫번째 두번째 첫번째 두번째 세번째 리스트의 엘리먼트를 하나 더 추가하면 두 트리의 변경은 잘 작동하지만, key 값이 없기 때문에 변경되지 않은 엘리먼트 또한 재평가를 하게된다. 이런 문제를 해결하기 위해 key값을 넣어주는것이 좋다. 넣어주어야 한다. key 값을 넣어주게 되면 key값으로 판단하여 변경된 부분만 추가할 수 있게되기 때문..

CRA로 리액트 프로젝트를 생성하고 index.js 를 보면 맨 밑에 reportWebVitals() 라는 함수를 실행하고 있는 부분이 있다. 이부분은 같은 폴더의 reportWebVitals 파일에서 가져온 함수를 실행하고 있는 것인데 주석 처리된 예 처럼 함수에 console.log를 넣어주면 개발창으로 앱의 퍼포먼스시간들을 분석하여 객체 형태로 보여준다. // metric(측정도구) 이름 name: 'CLS' | 'FCP' | 'FID' | 'LCP' | 'TTFB'; // 측정된 현재값 (값이 작을수록 빠른성능을 뜻합니다) value: number; // 현재 측정값(current value)과 최신 측정값(last-reported value) 차이 // 첫번째 리포트에서 위 둘값은 항상 같습니다..