[ React ] img태그의 src 속성에 props로 require() 전달 시 "Cannot find module" 에러

프로젝트를 진행하면서 사용자의 취향 키워드를 수정하는 화면에서 아래와 같은 식으로 클릭한 요소를 표시할 수 있도록 작업 중이었다.

 

코드의 재사용성을 높여주고, 반복되는 작업을 줄이기 위해

각 키워드 카테고리들을 따로 컴포넌트로 만들어서 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()