삐제제의 개발 노트

리액트로 코딩할때 디자인 패턴의 한 종류! 컨테이너(Container) : data와 state(상태값)를 가지고, api를 호출하고, 기타 모든 로직들을 처리한다. (데이터를 받아와서 처리하는 것을 담당함) 프리젠터(Presenter) : 컨테이너가 처리한 데이터들을 화면에 뿌려주는 역할을 하는 함수형 컴포넌트 프리젠터는 state(상태값), api, 클래스 등을 다루지 않는다. (데이터를 화면에 뿌려주고 스타일을 담당함) 이런식으로 구성함! HomePresenter.js : 스타일 담당, Container.js 로 export HomeContainer.js : 각종 로직 담당, Presenter로 처리한 데이터(prop 등) 넘겨줌, index.js 로 export index.js : 컴포넌트를 폴더..

npm i styled-components 먼저 설치가 필요한 모듈이기때문에 설치를 하고, import 해서 사용한다! 얘를 사용함으로써 얻는 특징은 style이 안에 있는 컴포넌트를 생성 할 수 있게 한다고한다! 이런식으로!! 컴포넌트 내부에서 CSS를 만들고 입힐수 있는것! VSC를 사용하고있다면, extension에서 vscode-styled-components를 검색하면, 자동완성 기능까지 사용할 수 있다! 코드를 보면 어떤식으로 사용하는지 알 수 있다! const (이름) = styled.태그명 `(css코드)`; * css 코드를 감싸고 있는것은 백틱이다. * 이런식으로 사용한다. * Prop값도 줄수 있다고한다. * 이렇게 styled-components 모듈을 이용하면, 클래스네임을 일일히..

이번 포스팅에서는 컴포넌트의 prop을 검사해주는 아주 똘똘한 라이브러리를 적어놓으려고한다. "왜 PropTypes를 사용하는건가요?" 그 이유는.. 우리는 사람이기때문에 코드를 작성하다가 실수 하는 경우가있다. (아래의 foodILike는 { name, image, rating } 의 정보를 각각 담고있는 배열이다.) function App() { return ( {foodILike.map((dish) => ( ))} ); } 예를들어 이런 코드가 있을때.. 실수로 rating에 숫자를 집어넣어야하는데 문자를 넣었다던지 하는 실수.. 컴파일 에러는 안되서 동작은 잘 되지만, 뭔가를 나도 모르게 실수했을때, 그 실수를 잘 찾도록 도와주는 라이브러리가 바로 PropTypes 이다. 기본적인 사용법은 아주 ..