[React] CSS, Image, className, 반복 요소 렌더링, list 복사

1. CSS

- React에서 CSS를 import를 해줄 때는 import "./default.css" 처럼 해준다.

- 그리고 CSS import는 프로젝트 시작점에 한번만 해주면 된다.

2. Image

- Image를 쓰기 위해서는 import GAME_1 from "./images/game-1.jpg" 처럼 import를 해주는 방식으로 한다.

- 그 다음에 import를 해준 이름으로 <img src={GAME_1} alt=""/> 처럼 해주면 이미지를 사용할 수 있게 된다.

3. className

- React에서 태그에게 class 속성을 줄 때 class로 주지 않고 className으로 줘야 한다.

- CSS에서 똑같이 .클래스명 으로 접근할 수 있다.

4. 반복 요소 렌더링

- 화면에 안에 있는 몇가지 내용만 다르고 같은 UI를 반복적으로 나타내고 싶을 때가 있다.

- 그러기 위해서 여러가지 방법이 있는데 그 중 하나가 useState에 list를 줘서 list 반복문을 사용하는 방법이 있다.

- 위처럼 필요한 데이터들을 state로 list로 받아서 사용한다. 실제로는 이 데이터들은 데이터베이스에 저장되어 있다.

- 그 이후에 list 반복문인 foreach나 map을 이용해서 list에 저장되어 있는 첫 인덱스부터 하나씩 돌아가면서 원하는 데이터를 교체하면서 화면에 보여준다.

- 이때 {} 안에 list 반복문을 써야 한다.

5. list 복사

- state 변수를 사용하지 않고 list 안에서 받아온 count나 이런 것을 하나씩 더해서 수가 증가할 때 화면에도 state처럼 값을 유지하도록 하는 방법이 list를 복사해서 setList를 사용하는 것이다.

- 따로 state 변수를 사용하지 않고 받아온 데이터 값을 쓰면서 count의 값을 유지할 때는 받아온 데이터의 count를 1을 더해준 다음 setList를 통해 list state를 업데이트 해주면 된다.

- 이 때 그냥 list를 업데이트를 해줄라고 하면 React에서는 불가능하다.

- 그렇기에 [...list]라는 것을 통해 다른 리스트 공간에 복사를 해서 그 복사한 것을 setList를 해주게 되면 화면에도 값이 유지된 채 나오게 된다.