초보 개발자의 성장 일기

todo리스트 구현 중 O버튼을 누르면 객체 속성 중에서 done이 false에서 true로 바뀌고 style에 props로 done의 상태를 전달받아 true로 바뀌면 style이 바뀌도록 구현했다. 데이터는 localstorage로 저장했고, 배열의 상태가 변화할때마다 localstorage의 상태로 업데이트 되도록 useState를 해 놓은 상태이다. 삭제, 등록은 바로 리렌더링이 돼서 화면에 구현이 되는데 할일을 완료했을 때는 새로고침해야만 스타일이 반영이 됐다. state가 변경이 되면 리렌더링이 되는데, state가 바뀌지 않고 있다고 판단이 되었고, 버튼을 클릭할 때 객체안의 done의 속성이 false에서 true로 바뀌는 순간에 "state가 변경되었다고 인식하지 못하는건가?" 라는 생각..

useCallback은 컴포넌트를 최적화 시켜주는 도구이다. useMemo와의 차이점 useMemo: 인자로 콜 백함수를 넣어주면 return 값을 memoization 한다. useCallback: 인자로 전달한 콜백함수 그 자체를 memoization 한다. const calculate = useCallback((num) => { return num + 1; }, [item]) useCallback으로 함수를 감싸주어 함수가 필요할 때마다 메모리에서 가져와 재사용한다. function Component() { const calculate = useCallback((num) => { return num + 1 }, [item]); return {value} } 컴포넌트 객체가 처음 렌더링 될 때만 함수..

새로운 개념 css box model ? Sass ? css box model box-sizing content-box의 크기를 말하며 크기를 정의하기 위해 width, height가 디폴드 값이 된다. 예를들어 width: 150px, heigh: 300px로 정의해보자. 이 때 content의 크기가 위와 같이 정의가 되고, padding 100px을 넣었을 경우 content-box는 양옆, 위, 아래 각각 100px이 추가되어 width: 150px + 200px = 350px, height: 300px + 200px = 500px이 되는 것이다. 이렇게 하면 레이아웃 구성시 이렇게 따로 계산하게 되면 레이아웃 작성 시 이해하기 어려움 (코드랑 보여지는 부분이 다름) 쉬운 레이아웃을 정의하기 위해..

새로운 개념 스타일링? Sass? styled-components? 번들사이즈? 스타일링은 왜 하는가? 웹이 스타일링 없이 글만 작성되있으면 한눈에 알아보기 힘들고 당황스럽다. 효율과 사용성을 위해 사용, 좋은 앱을 만들기 위한 것, 결국 사용자에게 더 나은 UI를 구현하기 위한 방법이다! 정말 말 그대로 웹을 스타일링 하는것을 의미! 스타일링의 방법 1. CSS import : css 파일을 따로 만들어 import해서 css 파일을 가져옴 Button.JSX import 'button.css' // button.css를 가져옴 funtion Button({ children }) { // chidren이라는 컴포넌트를 사용될 때 함수 구현 return ( // html button태그 생성, class..