props 2

React component와 props 활용 | 같은 UI에 다른 내용 넣어보기

리액트는 코드의 재활용성이 높다. UI를 재사용 가능한 여러 조각으로 나누는데 이것을 컴포넌트(component) 단위로 나눠서 작업한다고 한다. 즉 내가 원하는 것을 모아서 하나의 태그로 만들어 쓰는 셈이다. 이렇게 컴포넌트를 잘 활용하게 되면 여러 곳을 한 번에 바꿔야 할 때 한 번만 바꾸면 되기 때문에 유지보수에 좋다. 또 component에 props를 사용하면 비슷한 UI를 만들 수 있다. 컴포넌트 안에서 조금씩 달라지는 부분에서 props를 활용하면 리액트 코드 재활용성을 높힐 수 있는데 내용이나 이미지뿐만 아니라, css에서도 조금씩 달라지는 부분에서만 활용할 수 있다. 렌더를 해주는 App.js에서 속성 값을 주고, 각 컴포넌트 안에서는 매개변수로 props를 받으면 된다. 컴포넌트 안에서..

STUDYING/React 2022.05.08

[React] styled-components 사용하기/ props 활용과 style 재사용(확장)

지난 리액트 프로젝트에서 css로 스타일링했는데 프로젝트가 끝날 때쯤 styled-components를 사용하면 디자인 측면에서도 재활용성을 높일 수 있음을 알게 됐다..그래서 새로운 프로젝트를 하면서 styled-components를 사용해볼 것, 스타일링 재활용을 조금이라도 해볼 것을 목표를 잡았고, 사용했던 것을 기록해보려고 한다! 리액트에서 컴포넌트를 스타일링할 때 새로운 기술을 익힐 필요 없이 CSS, SASS를 사용할 수 있지만 CSS-in-JS 라이브러리인 styled components를 사용하면 아래와 같은 방법들로 재사용성을 높일 수 있다. 0. styled-components 사용하기 npm install --save styled-components 우선 프로젝트 안에서 styled-..

STUDYING/React 2022.03.27