[react] img 경로 설정 / 상황에 맞는 className 지정

1.public 폴더에서 이미지 가져오기

<img src={process.env.PUBLIC_URL + `/assets/emotion1.png`} alt="img"/>

process.env.PUBLIC_URL 를 사용하면 어떤 곳에 있던 /public 디렉토리를 가리키게 된다.
public 폴더를 바로 가져올수 있는 명령어 이다.

2.상황에 맞는 class명 지정하기

className은 배열로 여러가지를 넣을수 있는데 type에 따라 다르게 설정할수 있다.
배열로 클래스 명을 설정하고 사용하기 위해서는 join메소드를 사용하여 string으로 수정해 줘야 한다.

component

const CustomButton = ({text,type, onClick})=>{
  
  return(    
    <button class={['CustomButton' ,`CustomButton_${type}`].join(' ')}onClick={onClick}>{text}</button>
)
}

//type 전달이 없을땐 default를 전달한다.

CustomButton.defaultProps = {
	type:'default'
}
export default CustomButton

css

.CustomButton_default {
  background-color: #ececec;
}

.CustomButton_positive {
  background-color: #64c964;
}
.CustomButton_negative {
  background-color: #fd565f;
  color: white;
}