React img srcSet과 a태그 스크롤

이미지가 사이즈별로 뿌옇게 보이거나 깨지는 경우가 있다. 고정된 이미지 width, height값에서 사이즈를 조정하려고 해서 발생하는 것같은데 해상도별로 이미지를 다른 사이즈로 보여주고 싶었다.
포토샵을 할 줄 몰라 이미지를 부탁드려서 preview, 2000w, 1800w, 1600w, 1400w, 1200w, 1000w, 860w, 640w으로 각 하나에 해당하는 이미지를 해상도마다 같은 폴더로 저장 시켜서 구현했다.

이미지 폴더를 생성해 아래와 같이 구현하였다.

img폴더 안에 있는 하나에 help이미지 하나에 대한 해상도 별 이미지들

 

아래는 실제 코드로 구현한 내용들이다. React로 구현한 코드는 아래와 같다.
도움말 페이지를 아래와 같이 구현하였으며, 간략하게 작성한다.

import Layout from '....';
import ExHelpImgPreview from '....'; // ....은 img가 있는 경로
import ExHelpImg2000 from '....';
import ExHelpImg1800 from '....';
import ExHelpImg1600 from '....';
.....

const Help = () => {

	const helpPageData = [
    	{
        	id: 1,
            title: '도움말 첫번째',
            img: <img src={`${ExHelpImgPreview`}
				srcSet={`${ExHelpImg2000} 2000w,
                ${ExHelpImg1800} 2000w,
                ${ExHelpImg1600} 1800w,
           		..... // 640w까지 있으면 동일하게 작성
                `}
                alt=""
             />,
             content: '도움말 첫번째 내용'
        }, {
        	id: 2,
            title: '도움말 두번째',
            img: <img src={`${ExHelpImgPreview`}
				srcSet={`${ExHelpImg2000} 2000w,
                ${ExHelpImg1800} 2000w,
                ${ExHelpImg1600} 1800w,
           		..... // 640w까지 있으면 동일하게 작성
                `}
                alt=""
             />,
             content: '도움말 두번째 내용'
        }
    ];
    
    // 비슷하게 컴포넌트로 사용하기 위해 생성
    const HelpComponent = () => {
    	return (
        	<div>
            	{helpPageData.map((list: any, index: number) => {
                	return (
                    	<div key={index}>
                        	<div id={'help_title'+ list.id}> // id를 준 이유는 스크롤 시 우측에 제목만 보여주게끔해서 클릭시 해당 제목으로 이동되게 구현하기 위해
                            	<div>
                                	{list.img}
                                </div>
                            </div>
                            <div>
                            	{list.content}
                            </div>
                        </div>
                    );
                }
            </div>
        );
    };
    
    return (
    	<Layout>
            <div style={{display: 'flex'}}>
                <div style={{width: '1100px', paddingRight: '80px', paddingLeft: '80px'}}>
                  <div style={{fontSize: '40px', borderBottom: '1px solid #eee', paddingBottom: '10px', fontWeight: '700'}}>도움말 안내</div>
                  <OrderHelpComponent />
                </div>
                <div style={{paddingTop: '67px'}}>
                  <div style={{position: 'fixed', paddingLeft: '10px', borderLeft: '1px solid #eee', color: '#807b7b'}}>
                    <div style={{marginBottom: '15px'}}>
                      <span>CONTENTS</span>
                    </div>
                    <div style={{marginBottom: '10px'}}><a href="#order_help_title_1">도움말 첫번째</a></div> // 클릭시 해당 id가 있는 부분으로 이동
                    <div style={{marginBottom: '10px'}}><a href="#order_help_title_2">도움말 두번째</a></div>
                  </div>
                </div>
            </div>
        </Layout>
    );
};

export default Help;