[React] props 공부하기

props 에 대해 공부하면서 코드 리팩토링을 해야 하는 이유도 체감했다.

 

지금까지 여러가지 버튼을 만들때면 단순히 button 태그를 이용하고 클래스만 다르게 주었는데,

비슷한 버튼을 만드는 경우에도 공통 클래스를 주고 색상만 다른 클래스를 추가하는 방법으로만 진행했다.

 

예전에 팀 프로젝트를 하면서 styled-component 를 잠깐 쓴 적이 있는데 

그때 이후로는 저렇게 클래스만을 통해서 코딩했다.

 

그러다 오늘 props 를 공부하면서 머리가 띵! 했달까? ㅋㅋ

 

먼저, 내가 원하는 건 두개의 버튼을 만드는 것이다.

여기서 버튼 안에 있는 텍스트와 이 텍스트의 크기만 다르게 하고 나머지 스타일은 같게 만들려고 한다.

 

 

평소 같았으면 이렇게 코딩했을 거다.

 

<button className="user-btn">버튼1</button>
<button className="user-btn user-btn2">버튼2</button>

 

 

user-btn 에는 공통된 css style 을 적어주고 user-btn2에서 font-size 를 다르게 주었을 것이다. 

 

이러면 css 는 cascade 방식에 따라 마지막에 오는 스타일이 적용되므로 css 파일에서 user-btn 에 대한 스타일을 먼저 입력하고 user-btn2 에 대한 스타일을 입력해야 잘 적용된다. 

 

 

 

지금 생각해보면 좀 비효율적인 코드이다.

 

그래서 버튼을 컴포넌트로 만들고 props 를 통해 필요한 정보를 부모 컴포넌트에서 전달해주는 방식을 사용했다.

 

 

function Btn({ title, fontSize = 16 }) {
      return (
        <button
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10,
            fontSize: fontSize,
          }}
        >
          {title}
        </button>
      );
}

<Btn title="Save" fontSize={18} />
<Btn title="Continue" />

 

 

Btn 은 button 을 가진 컴포넌트인데, 이 안에 기본 스타일을 적어주었다. 

부모 컴포넌트에서는 Btn 으로 사용 가능한데, 이때 props 로 버튼에 적힐 텍스트와 사이즈를 넘겨준다.

 

텍스트는 title, 글씨 크기는 fontSize 로 적었다. 이건 내가 원하는 이름으로 하면 된다.

그러면 Btn 의 argument 로 넘어가게 되고, 이를 필요한 곳에 사용할 수 있다. 

 

 

참고로 props 는 object 이기 때문에 중괄호 {} 를 통해 비구조화 할당을 통해 내 방법처럼 바로 title 과 fontSize 를 사용할 수 있고, 아니면 props object 자체를 argument 로 받아서 props.title, props.fontSize 로 사용할 수 있다.

 

 

나는 비구조화 할당을 하면서 {title, fontSize = 16} 으로 적었는데 = 표시는 default 값을 의미한다.

부모 컴포넌트에서 fontSize 를 넘겨주지 않으면 자동으로 16으로 값이 정해지는 것이다.

 

 

추가로, propTypes 를 통해 props 의 type 을 지정해줄 수도 있다.

 

Btn.propTypes = {
    title: PropTypes.string.isRequired,
    fontSize: PropTypes.number,
};

 

PropTypes 에는 array, func 등등 여러가지가 있고, isRequired 을 적으면 해당 값은 props 로 꼭 넘겨주어야 한다는 뜻이다.

 

 

이렇게 하면 결과는 다음과 같이 글자크기와 텍스트가 다르고 나머지 스타일은 같은 버튼이 생성된다.

 

 

 

앞으로는 여러번 사용되는 요소는 컴포넌트로 만들어 봐야겠다!