Section2 / Unit11 : 나만의 아고라 스테이츠(서버, 리액트)

오늘의 과제는

서버 베어미니멈 해결하는 것

섹션 1에서 바닐라 js로 만들었던 아고라 스테이츠를 리액트로 변환하기

 

css파일은 그대로 복붙하면 됐고

html파일도 jsx문법에 맞게 수정해서 App.js return 부분에 추가만 하면 기본적인 틀은 만들어졌는데

바닐라로 구현했던 js파일을 리액트로 변환하는 것이 쉽지 않았다.

어찌저찌 해결하다보니 잘 와닿지 않았던 useState, props 조금은 더 익숙해진 것 같았다.

 

그 와중에 이미지 태그가 적용이 안 되어서 애를 먹고 있었다.

파일 안에 이미지 파일을 적용했음에도 불구하고 경로를 지정해도 렌더링이 안 됐다.

require를 사용해서 어쩌구...하라고 하기는 했는데 그것도 적용이 안 됐고(ㅠㅠ)

바닐라js처럼 경로를 설정해도 안 되고 링크를 사용하면 해결되긴 했는데, 원하는 이미지 링크가 없어서 슬퍼하고 있던 와중

다른 수강생이 방법을 알려주셨다.

 

바로 import를 하는 것!

 

리액트에서 이미지 사용하는 방법은 import, require 두 가지가 있는데

 

import

import <사용할 이름> from <이미지 파일 경로>;

 

<사용할 이름>을 변수처럼 사용해서 해결했다.

 

require

require(이미지 파일 경로)

예시 / <img src={ require('./cat.jpg') } />

 

참조

https://webisfree.com/2019-12-12/[react]-img-%ED%83%9C%EA%B7%B8%EC%9D%98-%EC%9D%B4%EB%AF%B8%EC%A7%80%EB%A5%BC-%EC%B6%94%EA%B0%80%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95-%EB%B0%8F-%EC%98%88%EC%A0%9C-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0