-
Javascript Splice
Array.prototype.splice()
splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경하는 것.const arry = ["a", "b", "c", "d", "e"]; arry.splice(1, 0, "hi"); // 첫 번째 인자 index, //배열의 변경을 시작할 인덱스입니다. 배열의 길이보다 큰 값이라면 실제 시작 인덱스는 배열의 길이로 설정됩니다. 음수인 경우 배열의 끝에서부터 요소를 세어나갑니다(원점 -1, 즉 -n이면 요소 끝의 n번째 요소를 가리키며 array.length - n번째 인덱스와 같음). 값의 절대값이 배열의 길이 보다 큰 경우 0으로 설정됩니다. //두 번째 삭제할 것, //1이면 하나 제거 2개면 2개 제거 0개 면 제거 안 함 //세 번째 추가할 것 //추가 할 값 -
React memo
React.memo는 고차 컴포넌트(Higher Order Component)입니다.
컴포넌트가 동일한 props로 동일한 결과를 렌더링해낸다면, React.memo를 호출하고 결과를 메모이징(Memoizing)하도록 래핑하여 경우에 따라 성능 향상을 누릴 수 있습니다. 즉, React는 컴포넌트를 렌더링하지 않고 마지막으로 렌더링된 결과를 재사용합니다.
React.memo는 props 변화에만 영향을 줍니다. React.memo로 감싸진 함수 컴포넌트 구현에 useState, useReducer 또는 useContext 훅을 사용한다면, 여전히 state나 context가 변할 때 다시 렌더링됩니다.
이 메서드는 오직 성능 최적화를 위하여 사용됩니다. 렌더링을 “방지”하기 위하여 사용하지 마세요. 버그를 만들 수 있습니다.
DraggableCard에게 동일한 index와 동일한 todo prop을 받으면 리랜더링을 하지 않도록 하기 위함이다.
function MyComponent(props) {
/* props를 사용하여 렌더링 */
}
export default React.memo(MyComponent, areEqual);https://ko.reactjs.org/docs/react-api.html#reactmemo
-
숙련주차 마무리
상당히 힘든 주차였다. 프론트가 이렇게 할게 많다니 예외처리 등 하면 끝이 없다. 시간이 많이 주어졌다면 기능들을 좀 더 명확하고 정확하게 구현할 수 있을거 같은데 시간이 좀 부족했다. 이번 주차에서 한 가지 얻은게 있는데 날림 코딩을 지양해야 한다는 것이다. 여태것 코드를 짤 때 날림 코드 즉 생각나는데로 코드를 쓰고 구현되면 넘어가고 최종 마무리 때 그걸 다시 클린하게 짰었는데 코드 양이 많아지다보니 마지막에 클린코드를 하지 못했다. 내가 왜 이 코드를 썻는지 이해가 잘 되지 않았다. 돌아다니는 짤로 '처음 이 코드를 구현할 때 신과 나만이 안다. 하지만 이제는 신만 안다.' 이게 완전히 나의 이야기 인 것 같았다.
앞으론 날림코드를 작성하되 기능구현이 끝나면 그때그때 바로 클론코드를 짜야겠다.
