[React] props를 이용해 재사용성을 높이는 방법

1. props

---

읽기 전용

props는 읽기 전용 값이다.

컴포넌트를 함수나 클래스 어느쪽으로 제작하든 props는 수정할 수 없다.

 

다음의 sum 함수를 예시로 들어보자.

function sum(a, b){
	return a+b;
}

이런 식의 함수를 순수 함수라고 한다. 입력 값이 변경되지 않기 때문이다.

 

그렇다면 입력 값이 변경되는 비순수 함수는 어떤걸 의미할까?

function withdraw(account, amount) {
	account.total -= amount;
};

withdraw 함수는 입력 값이 변경된다.

이런 식으로 부수효과가 있는 함수를 비순수함수라고 한다.

 

모든 컴포넌트의 props와 관련해서는 순수함수여야만 한다.

2. 필요성

---

재사용성을 높이기 위해서이다. 예를 들어보자.

 

AddCharacter에서 사용하기 위해 Character 컴포넌트를 만들었다.

export default function Character(){
	return (
    	<>
        	<img 
            	src='https://images'
            	alt='a'
            />
            <h1>Aemie</h1>
            <h2>23</h2>
       	</>
   );
}

사용하다보니 다른 등장인물을 마구마구 사용하고 싶어졌다.

하지만 캐릭터 컴포넌트를 복사해서 계속 컴포넌트를 만드는 것은 비효율적이다.

 

이때 우리는 props를 컴포넌트에 입력 받아 필요한 부분만 수정해 사용할 수 있다.

 

3. 사용법

---

외부로부터 props를 입력 받아와 자바스크립트 중괄호를 사용해 props.변수이름으로 코드를 수정하면 된다.

export default function Character(props){
	return (
    	<>
        	<img 
            	src={props.image}
            	alt='a'
            />
            <h1>{props.name}</h1>
            <h2>{props.age}</h2>
       	</>
   );
}

사용할 때는 재사용할 부분의 변수만 수정해 입력해주면 된다.

function AddChracter() {
	return (
    	<>
       		<Character image = ''
            		   name=''
                       age=''/>
        </>
    );
}

 

Character 컴포넌트에서 props를 계속 작성하는 것이 귀찮다면,

자바스크립트 중괄호를 이용해 조금 더 코드를 줄일 수 있다.

 

export default function Character({image, name, age}){
	return (
    	<>
        	<img 
            	src={image}
            	alt='a'
            />
            <h1>{name}</h1>
            <h2>{age}</h2>
       	</>
   );
}