프로젝트를 진행하면서 사용자의 취향 키워드를 수정하는 화면에서 아래와 같은 식으로 클릭한 요소를 표시할 수 있도록 작업 중이었다.
코드의 재사용성을 높여주고, 반복되는 작업을 줄이기 위해
각 키워드 카테고리들을 따로 컴포넌트로 만들어서 props를 통해 해당하는 이미지와 state, setState함수 등을 전달하도록 해주려고 했다.
기존에는 각 요소들이
<div className='items-center justify-center mr-35'>
<div
onClick={클릭 시 해당하는 state값을 true/false로 바꿔주는 함수}
className='relative rounded overflow-hidden w-60 h-60'
>
<img src={require('../img/rice.png')} alt='rice_pic' className='align-top' />
</div>
<div className='relative flex flex_col items-center'>
<h6>한식</h6>
</div>
</div>
와 같이 구성되어 있었다.
별도의 컴포넌트로 분리할 경우 각 키워드 카테고리 별로 props로 전달해줄 값은
- 카테고리 이름
- img태그의 src속성값
- img태그의 alt속성값
- 해당 카테고리의 state
- 해당 카테고리 state의 setState함수
5가지이다.
그래서 아래와 같이 컴포넌트를 만들어주고
// [ 각 키워드 재사용 컴포넌트 ]
const ClickKeyword = (props) => {
return (
<div className='items-center justify-center mr-35'>
<div
// 키워드 클릭 시 state값 변경
onClick={(event)=>{
event.preventDefault();
if(props.targetState === false){
props.targetSetState(true);
} else{
props.targetSetState(false);
}}
}
className='relative rounded overflow-hidden w-60 h-60'
>
<img
// 해당하는 키워드의 state 값에 따라 표시
style={props.targetState ? {border: "3px solid rgb(250, 150, 0)", borderRadius: "20%"} : {}}
src={require(props.KeywordImage)} alt={props.KeywordAlt} className='align-top'
/>
</div>
<div className='relative flex flex_col items-center'>
<h6>{props.KeywordName}</h6>
</div>
</div>
);
};
이렇게 컴포넌트를 사용하였다.
이 때, ClickKeyword 컴포넌트에서 img 태그의 src속성 값으로 require(이미지 경로) 를 사용했는데,
props로 경로 문자열만 전달해주고, ClickKeyword 컴포넌트에서 src={require(props.KeywordImage)} 로 받아왔다.
하지만 아래와 같은 오류 메세지가 나오면서 화면이 렌더링 되지 않았다.
Uncaught Error: Cannot find module '../img/rice.png'
결국 src속성에 해당하는 경로를 찾지 못했다는 뜻인데, 따로 변수로 저장 후 넣어보고, 작은따옴표와 큰따옴표를 사용해보고 했지만 그대로였다.
해결 방법은 아래와 같다.
require(이미지경로) 자체를 통째로 props로 넘겨주었고, 이렇게 해주니까 잘 됐다.
키워드 컴포넌트는 아래와 같이 작성해주었고, (가독성을 위해 캡쳐본으로 첨부)
컴포넌트 사용 시에는 아래처럼 require()을 통째로 props에 넘겨준다.
구글링 하면서 해당 블로그 글을 참고하였다.
https://velog.io/@narcoker/NarcokerBlog-require
[React] img태그 src require()
Project 페이지를 만들 때 하드코딩을 하기 위해 데이터를 넣어주면 동적으로 새로운 Project Container를 생성하도록 계획했다.String 값은 제대로 불러와졌지만 require() 안에 이미지 링크가 담긴 변수
velog.io