리액트 2일차

1.

      {title.map((item, index) =>
        {return <div key={index}>
          <div className='list' key={index}>
            <h4>{item} <span onClick={() => {let copy = [...like]; copy[index]++; setLike(copy)}}>👍</span>{like[index]}</h4>
          </div>
          <p>{day[index]}</p>
        </div>})}

Warning: Each child in a list should have a unique "key" prop.

 

만약 key 없이 배열을 렌더링한다면, 배열에 1개의 데이터가 더 추가되는 상황이라도 React는 N+1개의 전체 요소를 처음부터 리렌더링한다고 한다. 하지만 key를 지정하면 기존 요소가 바뀌지 않으면 그대로 두고, 새로 생기는 요소만 리렌더링한다고 한다.

 

따라서 <div className='list' key={index}>와 같이 key를 넣었다.

찾아보니 array index를 key로 주는 것을 리액트는 지양한다고 하는데...

https://medium.com/sjk5766/react-%EB%B0%B0%EC%97%B4%EC%9D%98-index%EB%A5%BC-key%EB%A1%9C-%EC%93%B0%EB%A9%B4-%EC%95%88%EB%90%98%EB%8A%94-%EC%9D%B4%EC%9C%A0-3ce48b3a18fb

[React] 배열의 index를 key로 쓰면 안되는 이유

위 링크에서 이유를 확인할 수 있었다.

 

 

2. public 폴더

https://bokjiho.medium.com/react-%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90%EC%84%9C-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EA%B2%BD%EB%A1%9C-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0-public-src-%EB%94%94%EB%A0%89%ED%86%A0%EB%A6%AC-%EC%B0%A8%EC%9D%B4-fddb4f455c2a

[React] 리액트에서 이미지 경로 설정하기 (public, src 디렉토리 차이)

위와 같이 퍼블릭 폴더에 이미지들을 넣어뒀다.

이를 컴포넌트에서 가져오기 위해 경로를 작성할 때,

퍼블릭 폴더에 넣어두면 경로를 생략해도 된다는 것을 알게 되었다.

 

<img src="img/yb1.jpg" className="w-25" alt="모자" />

위와 같이 경로를 작성하면 된다.

 

📁 public directory
- 정적 파일을 넣는 디렉토리 (index.html을 비롯한 html 파일, img 등)
-public 디렉토리에 넣은 파일은 webpack으로 처리되지 않고, 원본이 build 폴더에 복사된다.
-파일이 후처리(post-process) 되거나 경량화(minify)되지 않음
-파일 경로를 잘못 입력하거나, 해당 파일이 존재하지 않을 경우 컴파일 단계에서 오류가 발생하지 않고, 사용자가 접근할 때 404 오류를 응답받게 됨
-결과 파일명에 content hash가 포함되지 않기 때문에, 파일이 수정될 때 마다 직접 파일명을 수정하거나 매개변수 쿼리를 추가해야 함

 

3.json 사용하기

let data = [
	{
	    id : 0,
	    title : "NM HAIRY BEANIE",
  	    content : "Born in France",
	    price : 120000,
		img : 'img/yb2.jpg'
	},
	{
	    id : 1,
	    title : "FLARE Knit Beanie",
  	    content : "Born in Seoul",
	    price : 110000,
		img : 'img/yb3.jpg'
	},
	{
	    id : 2,
	    title : "SOFT BUCKET HAT WHITE",
  	    content : "Born in the states",
	    price : 130000,
		img : 'img/yb4.jpg'
	}
]
export default data;

위와 같은 JS파일이 있다. export default data;에 의해 다른 파일에서 data로 import해올 수 있다.

import data from './data'

이렇게 가져온 데이터는 변경될 수 있는 값이므로 state로 관리해준다.

  let [Data, setData] = useState(data);

해당 데이터를 이용해 map함수를 돌리는 코드

       <div className='container'>
          <div className='row'>

          {Data.map((item, index) => {
            return <div key={index} className='col-md-4'>
              <img src={item.img} className='img-fluid' alt='yb'/>
              <h4>{item.title}</h4>
              <p>{item.content}</p>
              <p>{item.price}</p>
            </div>
          })}

          </div>
        </div>

 

해당 코드를 활용해 만든 부트스트랩 사이트

사진은 모두 우리팀원이라 모자이크^__^