들어가기 전

우선 React의 styled-components 알아보기 전에 React가 왜 Front_End에서 많이 쓰이는지 이유에 대해 알아보자.

React를 왜 배워??

사실 생각해보면 HTML, CSS, JavaScript 이 3개로도 충분히 웹페이지를 만들어낼 수 있다. 그렇다면 왜 React라는 걸 개발자들이 사용하고 있는걸까?

가장 큰 이유는 UI 구성 요소, 즉 컴포넌트를 따로 따로 만들어낼 수 있다는 점에 있다. 이렇게 된다면 필요할때마다 컴포넌트를 불러와 페이지에서 쓸 수 있다. 이렇게 되면 장점들이 매우 많다.

1. 관리 측면에서의 효율성
   우선 컴포넌트를 쪼개서 관리하기 때문에 수정이나 관리면에서 매우 효율적이 된다.

2. 코드 재사용
   그리고 같은 코드를 계속 반복해서 쓰지 않아도 된다.

3. 렌더링 최소화
   렌더링 시에 필요한 컴포넌트만 랜더링 시킬 수 있다.
   렌더링이 필요할 때 화면 모두를 초기화 하는게 아니라 필요한 부분만 렌더링 시킬 수 있다.

4. 코드 간략화
   HTML 하나 파일에 모든 걸 만들다보면 코드가 엄첨나게 길어지는 경험을 해봤을 것이다. 하지만 React에서는 컴포넌트 별로 파일을 따로 두어서 코드가 엄청나게 짧아지며 가독성이 올라간다.

이렇듯 장점들이 매우 많다. 쉽게 말해 레고를 생각하면 좋을 것 같다. 큰 바닥 틀에 내가 필요한 부품들을 가져와서 조립하여 만드는 것이 React의 강점이 있다.
이 뿐만 아니라 JSX 지원이나 라이브러리, 프레임 워크 지원등 다양한 장점이 있지만 styled-components 를 배우기 전에는 이 정도만 알고 있으면 앞으로 배울 부분에 이해가 쉬울 것이다. 이를 배경으로 깔고 styled-components를 다루어보자.

styled-components란?

우리는 이제 img태그, button태그 등 기능을 하는 우리만의 태그들을 만들어낼 것이다.
이를 위해서는 태그들의 디자인을 만들어내야 한다. 이때 우리가 만들어낸 태그들에 CSS (디자인) 을 해주는데 도와주는 것이 styled-components 이다.

우선 아래 코드를 봐보자.

const BoxEach = styled.div`
    width: 200px;
    height:100px;
    margin: 50px;
    border-radius: 30px;
    background-color:green;
`

이렇게 되면 우리는 BoxEach라는 태그를 만들어낸 것이다.
기본적인 div 태그의 아래와 같은 CSS를 추가해서 아래와 같이 커스텀한 BoxEach태그가 만들어진 것이다.

사용방법은?

const 나만의 태그 이름 = styled.커스텀할 태그'
	커스텀할 내용 (CSS코드)
`

위와 같이 내가 만들 태그의 이름을 정해주고, styled.에 내가 커스텀할 태그를 붙이고 백틱으로 커스텀할 내용을 만들어주면 된다.

styled-components라면서?

이제 궁금즘이 생긴다. 태그들을 커스텀해서 새로운 태그들을 만들어내는 것이구나!! 근데 styled-components라면서 components를 꾸며야 되는거 아니야?

• components란?
  페이지에 렌더링할 React 엘리먼트를 반환하는 작고 재사용 가능한 코드 조각을 말한다.

이 컴포넌트는 함수형 컴포넌트, 클래스형 컴포넌트 등으로 나뉘는데... 이 부분을 설명하기에는 너무 길어지게 때문에 간단하게 설명해보겠다.

React에선 JSX 파일이란 걸 사용하는데, 이는 Javasript 파일에서 html코드를 넣을 수 있게끔 해준다. 그래서 컴포넌트를 관리할때 JavaScript함수를 만들어서 여기서 HTML 코드를 넣어서 이를 return 해줘서 사용한다.

위에 코드를 다시 가져와보자.

const BoxEach = styled.div`
    width: 200px;
    height:100px;
    margin: 50px;
    border-radius: 30px;
    background-color:green;
`

이 코드가 어떤 일을 정확히 대신해주는 것인지에 대해 알아보기 위해 stlyed-components 가 없었더라면 어떻게 만들지 아래 코드를 봐보자.

const BoxEach = () =>{
	const customStyle = {
    	width: '200px';
    	height: '100px';
    	margin: '50px';
    	borderRadius: '30px';
    	backgroundColor:'green';
    }
    return(<div style={customStyle} />)

}

원래는 위와 같이 JS 함수 형태로 만들어진 것이다. 이러한 JS 함수 또는 클래스 덩어리를 컴포넌트라 부르며 이 컴포넌트를 꾸미는 것이 stlyed-components 가 되는 것이다.

styled-components 활용

이제 stlyed-components 어떤 것인지 개념적으로 이해가 갔을 것이다. 이제 이걸 가지고 우리가 무엇을 만들 수 있을까?

예시를 들어보면 아래와 같이 만들어낼 수 있다.

import React from "react";
import styled from "styled-components";


const BoxEach = styled.div`
    width: 200px;
    height:100px;
    margin: 50px;
    border-radius: 30px;
    background-color:green;
    display:flex;
    align-items:center;
    justify-content:center;
`

const BoxText = styled.p`
    font-size: 30px;
    font-weight: 500;
`


const Box = () =>{
    return(<>
    <BoxEach>
        <BoxText>box</BoxText>
    </BoxEach>
    </>)
}

export default Box;

위의 코드가 한것이 무엇이냐면 Box 컴포넌트를 만들어낸 것이다. 위에서 작은 영역 컴포넌트에 style을 주고 이를 하나로 묶어서 Box 라는 컴포넌트를 만들어낸 것이다.

이를 다른 파일에서 불러와서 Box태그를 사용해주면 우리가 만든 컴포넌트를 똑같이 불러낼 수 있다. 이렇게 됨에 따라 위에서 말한 코드를 레고화 시킨 것이라고 볼 수 있다. 이 덕분에 코드를 간략하게 할 수 있고, 각각의 컴포넌트를 따로 관리할 수 있다.

이제 stlyed-components 에 대해 이해가 갔을 것이다.
조금만 더 나가보자...
이 컴포넌트에 버튼 색을 어떤건 빨간색, 어떤건 초록색, 어떤건 파랑색으로 줄 수 없을까???
또... 출력 글자를 모두 box가 아니라 다르게 줄 순 없을까??

이때 등장한 것이 props 이다.

Props란?

아래 코드를 봐보자. img태그 같은 경우에는 src 속성, width속성, height 속성 등을 설정해줄 수 있다. 이에 따라 값이 변화되어진다.
이러한 속성들을 React에선 props 라고 부른다.

앞에서 말했듯이 React는 컴포넌트를 따로 만들어낼 수 있다. 이 컴포넌트를 만들어서 태그와 동일하게 사용한다.
하나의 코드를 봐보자.

const Main = () =>{
    return (<>
        <Box/>
        <Box/>
        <Box/>
    </>)
}

우리가 위에서 만들어낸 Box 태그에 img태그처럼 속성 값을 주듯이 우리도 줘서 속성을 개별로 설정해줄 수 있게 하겠다는게 props이다.

이는 상위 컴포넌트에서 하위 컴포넌트가 값을 전달해주는 개념이다.
현재 위에 코드는 Main 컴포넌트에서 Box컴포넌트를 감싸고 있는 형태로 Main이 상위 컴포넌트가 된다. 이렇게 되면 하위 컴포넌트인 Box 컴포넌트에 값을 전달해줄 수 있다.

하위 컴포넌트에서의 준비

이를 위해선 하위 컴포넌트에서는 상위 컴포넌트에서 속성값을 받을 준비를 해야된다.

우선 위를 예시로 들어서 상위부터 순서를 매겨보면 Main > Box > BoxEach 순서이다. 만약에 BoxEach에 속성을 바꾸고 싶으면 Main에서 속성값을 준것을 Box가 받고 Box가 이 값을 BoxEach로 넘겨주는 과정이 필요하다.

이는 하위 클래스 에선 props를 받는 방법이 함수에서 받는 방법과 styled.components 에서 받는 방법 두 가지가 있다.

1. styled.components에서 props 받기

props는 함수형과 다르게 인자를 받는 부분이 없어서 아래와 같이 만들어줘야 한다.

const BoxEach = styled.div`
    width: 200px;
    height:100px;
    margin: 50px;
    border-radius: 30px;
    background-color: ${(props) => props.boxColor? props.boxColor:"green"};
    display:flex;
    align-items:center;
    justify-content:center;
`

background-color는 인자로 받은 것 중에 boxColor가 있다면, 나는 그걸로 색깔을 하고 없다면 green으로 할꺼야! 라는 뜻이다.
이 방법은 아래와 같다.

바꾸고 싶은 부분에 ${} 로 값을 주고 이 안에 props에 어떤 값을 주겠다고 선언하면 된다. 위 코드는 삼항 연산자를 두어서 값을 안받았을때까지 고려를 한 모습이다. 만약에 값이 모두 주어진다면 아래와 같이 코드를 구현할 수 있다.

background-color: ${(props) => props.boxColor};

2. 함수에서 props 받기

함수는 인자 받는 부분이 있어서 좀 더 간단하다.

const Box = (props) =>{
    return(<>
    	<BoxEach boxColor = {props.boxColor}>
        <BoxText>box</BoxText>
    </BoxEach>
    </>)
}

위에 코드처럼 인자로 props를 받고 이 props를 넣을 부분에 넣기만 하면 끝이다. 지금 코드는 props 받아서 거기서 boxColor라는 이름을 가진 값을 boxEach에 boxColor라는 변수로 줄꺼야! 라는 뜻이다.

상위 컴포넌트에서 값 전달

이는 이미 좀 위에서 스포가 되었다.

만약 Main컴포넌트에서 Box컴포넌트에 boxColor라는 변수에 'red', 'blue'라는 값을, 하나에는 아무것도 안줄래!! 라고 하면 아래와 같이 만들면 된다.

 const Main = () =>{
    return (<>
        <Box boxColor ="red"/>
        <Box boxColor ="blue"/>
        <Box/>
    </>)
}

이렇게 되면 Box에 props에 boxColor라는 변수에 red를 담아 보내 준 것이다. 이것이 Box에서 받고, EachBox로 주게 된다. 그래서 아래와 같이 만들어낼 수가 있다.

정리

본인은 HTML, CSS, JS를 배웠을 당시 프론트엔드가 너무 복잡하고 난잡하다고 생각했다. 하지만 React를 접하고 이러한 라이브러리를 배울수록 프론트 엔드 작업이 할만해졌고, 페이지 만드는게 간단해졌다.

Style-components와 props는 사실 엄청난 기술!! 인건 아니지만, 우리가 웹 페이지를 작업하는데 있어서 앞서 말한 복잡성과 난잡성을 줄여줄 수 있는 도구라고 생각한다. 다른 분들도 이 블로깅을 통해서 좀 더 편안한 개발을 하였으면 좋겠다.