React 기초 (props)

우선 이전과 마찬가지로 https://nomadcoders.co/react-for-beginners  노마드코더 강의를 통해서 공부하고 정리하고 기록한 글이다.

기록했던 내용이 한번 날아가서 다시 작성하는 건 조금 슬프군요 ㅠ

 

props 란?

- props는 properties의 줄임말로 속성이라는 뜻이다. // 뭐 사용할 때에 따라 (값, 속성)이라고도 하지만 중요한 것은

-상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용한다.(단방향 데이터 흐름)

// 이거에 대해 조금 더 이야기하자면 상위 컴포넌트는 하위 컴포넌트에 props 전달, 하위는 상위에 이벤트 발생 역할을 한다.

 

-프로퍼티는 수정할 수 없다는 특징이 있다 (자식입장에서는 읽지 전용인 데이터이다.)

 

사용하는 이유?

만약 우리가 컴포넌트 버튼을 2개 만든다고 생각해 보자. 아래와 같이 작성할 수 있을 것이다.

    function Btn1(){
      return <button>변화</button>
    }
    function Btn2(){
      return <button>확인</button>
    }
    function App() {
      return (
        <div>
          <Btn1 />
          <Btn2 />
        </div>
      );
    }

하지만 만약 버튼이 몇백 개가 들어간다면? Btn1, Btn2, Btn3... 이런 식으로 작업을 하기에는 무리가 있어 보인다.

이럴 때 props를 사용하면 된다.

 

 

props의 기본 사용 방법

우선 prop에 문자열을 전달할 때는 따옴표("")를, 문자열 외의 값을 전달할 때는 중괄호({})를 사용한다.

    function Btn(props) {
      return <button style={{ color: props.color }}>{props.name}</button>;
    }
    function App() {
      return (
        <div>
          <Btn name="취소" color="red" />
          <Btn name="확인" color="blue" />
        </div>
      );
    }

이렇게 작성할 수 있다. 보면 이해가 간다.

1. 상위 컴포넌트에 name, color 값을

2. 하위 컴포넌트인 Btn에 보내고  

3. 하위 컴포넌트에서는 그것을 읽고 처리해 준다. //위에서 말한 상, 하 컴포넌트에 관한 내용이다.

 

Btn() 컴포넌트 안에 console.log(props)를 찍어보면 아래와 같은 값을 알 수 있다.

 

console.log(props)를 했을때

이는 porps가 object(객체)로 전달이 된다.

object(객체)는 여러 속성을 하나의 변수에 저장할 수 있도록 하는 데이터 타입으로 key / Value Pair를 저장하는 구조이다.

 

 

props의 값을 조회할 때마다 props. 를 입력하고 있는데 props가 object이니 상황에 맞다면 더 간결하게 작성할 수 있다.

 

    function Btn({color, name}) {
      return <button style={{ color }}>{name}</button>;
    }
    function App() {
      return (
        <div>
          <Btn name="취소" color="red" />
          <Btn name="확인" color="blue" />
        </div>
      );
    }

자 props. 이 빠졌는데 뭔가 이상하지 않나? {color : color} 여야 할 것 같은데 왜 color만 작성되었냐?

이는 ES6가 똑똑해서 인데 만약 Key 이름으로 선언된 값이 존재한다면 바로 매칭시켜 주는 문법이 있기 때문이다.

object-shorthand문법이라고 불리는데 (굳이 이름까지는 알아둘 필요는 없다고 한다.)

 

기본값 설정

defaultProps로 기본값 적용

컴포넌트에 props를 지정하지 않았을 때 기본적으로 사용할 값을 설정하고 싶다면 컴포넌트에 defaultProps라는 값을 설정하면 된다.

Btn.defaultProps = {
  name: '이름없음'
}

props 지정할 때 javascript로 기본값 적용

function Btn({name, size= 16}) {
...
...
}

이런 방식으로 기본값을 적용할 수 있다.

 

React.memo()에 대한 가벼운 기초

위에 설명한 것처럼 버튼이 수백 개가 생기는 페이지고 props를 이용해 통일을 시켰다고 해보자. 버튼 중에는 클릭하면 값이나 내용이 바뀌는 것이 있을 수 있다고 생각해 보자. 그렇게 되면 Btn() 컴포넌트가 리렌더링이 되고 이는 수백 개가 넘는 버튼이 다 다시 리렌더링 된다는 뜻이다. 이를 개선하기 위해 React.memo()가 있다.

 

    const MemorizedBtn = React.memo(Btn);
    function App() {
      return (
        <div>
          <MemorizedBtn name={value} changeValue={changeValue} />
          <MemorizedBtn name="확인" color="blue" />
        </div>
      );
    }

 Btn() 컨포넌트는 큰 변화가 없어서 이렇게 보여준다. 1번 줄에서 React.memo()를 사용하는데 이러면 변화되는 컴포넌트만 리렌더링 된다.

 

propTypes 란?

자바스크립트의 유연한 특성 때문에 작성이 편한 반면, 생산성이 떨어지기 때문에 타입스크립트(typeScript)를 많이 사용하는데 반드시 자바스크립트를 이용해 앱을 개발해야 하는 상황에서는 이러한 문제점을 피하기 위해 propTypes를 활용하는 것을 권장한다.

 

Btn.propType = {
	name: PropTypes.string.isRequired,
	size: PropTypes.number,
}

이 PropTypes. 에는 여러 가지를 다 지정해 줄 수 있다. array, bool, func, number, object, string, symbol  

. isRequired는 값이 필수 요소로 필요할 때 추가하는 내용이다.

 

이렇게 작업을 해두면 오류가 생기는 것도 바로 확인할 수 있고 값의 정보를 정확한 속성이 어떻게 통일되어있는지 알 수 있어서 유용하다.