doeunn.log

▶React에서의 전개 연산자 스타일 컴포넌트를 계속 공부하다가 여기에서도 전개 연산자를 활용할 수 있음을 알게 되었는데요. 알고 있으면 정말 간편하고 유용할 거 같다는 생각이 들었던 거 같습니다. 오늘은 변수 앞에 ... 을 입력하여 사용하는 전개 연산자에 대해 차근차근 정리해 보려고 합니다. 🔎 전개 연산자 (...) : 그 외 나머지 매개변수 제일 뒤에 작성하는 변수의 앞에 전개 연산자를 붙이면 그 외 나머지 매개변수의 의미를 갖게 되는데요. 저는 이 나머지 매개변수의 의미를 이용하여 스타일 컴포넌트에게 전달해줄 매개변수에서 필요한 건 지정해서 전달을 해주고 나머지는 이 전개 연산자를 이용하여 지정 없이 싹 모아 전달하려고 합니다. 📌 예시 코드 Home 페이지에서 Button 컴포넌트를 impor..

▶공용 스타일 컴포넌트 관리 - 한번만 작성하고 import해서 쓰자 이번 글에서는 스타일 컴포넌트를 재활용 하는 방법에 대해 알아보겠습니다. 🔎 언제 쓰는데? 만약 Login 컴포넌트와 Signup 컴포넌트를 만든다고 합니다. 그런데 이 안에 들어가는 스타일 컴포넌트가 중복되는 경우가 있을 수 있습니다. 가령 예를 들어 가장 바깥쪽 Form의 형태나 input이 들어가는 박스의 크기 등이 있습니다. 이때 Login 컴포넌트와 Signup 컴포넌트에 똑같은 스타일 컴포넌트를 작성하지 말고 또 다른 js 파일로 스타일 컴포넌트를 모아놓고 import 해서 사용하면 코드를 1/2로 줄일 수 있을 거 같습니다. 🔎 적용해보기 지금 저는 Form이라는 폴더에 Login과 Signup 폴더를 따로 두어 분리를 했..

▶styled-components로 React 컴포넌트를 스타일링하자 이번 글에서는 CSS-in-JS 라이브러리인 styled-components를 사용하여 React 컴포넌트를 스타일링하는 방법을 살펴보겠습니다. 🔎 CSS in JS ? 먼저 CSS in JS 개념에 대해 알아보려고 합니다. CSS in JS는 스타일 정의를 CSS 파일이 아닌 Javascript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법을 의미합니다. HTML, CSS, Javascript는 각자 별도의 파일에 두는 것과 대비하여 여러 개의 컴포넌트로 분리하고, 각 컴포넌트에 HTML, CSS, Javascript를 몽땅 포함시키는 것인데요. React는 JSX를 사용해서 이미 Javascript가 HTML을 포함하고 있는 형태를..