게슈탈트로 이미지 컴포넌트 만들기

작은 이미지 컴포넌트와 긴 이미지 컴포넌트 만들기

레이아웃과 제목 부분은 만들었으니 이제는 이미지를 넣을 컴포넌트들을 만들어야 합니다. SmallImage 컴포넌트와 LongImage 컴포넌트라고 하고 코드를 작성해보겠습니다.

Long Image 컴포넌트와 Small Image 컴포넌트는 너비와 높이 빼고는 코드가 똑같아서 같이 하나의 컴포넌트로 구성해도 상관없지만 분리하는게 좀 더 단순하게 느껴질 것 같아서 따로 작성했습니다. 게슈탈트의 Box와 Image를 통해서 만들었고, 부모 컴포넌트로 부터 alt값과 src 값을 받아옵니다. 그래서 매개변수로 props를 주고 alt에는 {props.alt}, src에는 {props.src}를 전달했습니다.

컴포넌트를 만들었으니 이제 컴포넌트 안에 넣을 값들을 구해야합니다.

이미지 가져오기

저는 이미지를 픽사베이에서 가져왔습니다. fetch를 통해서 api를 가져오는 게 아니면 이미지를 어디에 두어야할까요? CRA로 리액트 환경을 만들었기 때문에 src 밖에 파일을 두면 에러가 납니다. 그리고 src안에 images 폴더를 만들고 사진들을 넣어두어도 require를 사용할 때 에러가 납니다. 그래서 제가 사용한 방법은 src안에 image폴더를 만들고 이미지들을 다 넣습니다. 그리고 image.js를 만들고 그 안에 이미지들을 다 import 한 후 객체로 내보냈습니다.

//src/images/images.js

import brownDog from './brownDog.jpg';

import cat from './cat.jpg';

import duck from './duck.jpg';

import lonelyDog from './lonelyDog.jpg';

import smallDog from './smallDog.jpg';

import threeCat from './threeCat.jpg';

import redPanda from './redPanda.jpg';

export default {

  brownDog,

  cat,

  duck,

  lonelyDog,

  smallDog,

  threeCat,

  redPanda

};

기스트에서는 에러가 나서 이런 방식으로 올립니다. 저런 형태로 만든 뒤에 App.js에서 사용하시면 됩니다.

이미지 값들을 state에 넣기

이제 이미지를 state에 넣어주세요. 해당 코드처럼 넣으시면 됩니다. 이렇게 state에 넣으면 나중에 좀 더 편하게 rendering할 수 있습니다. 이전의 리액트 예시에서도 map을 통해서 간편하게 rendering 했던 것을 기억하시나요? 그리고 render 함수에 state에 있는 animals를 구조분해 해주세요.

map을 활용해서 렌더링하기

우리가 넣어야 할 부분에 Object.keys() 메소드를 활용해 객체에서 배열을 얻어냈습니다. animals에는 "1", "2"처럼 문자로 된 키들이 있습니다 Object.keys()는 객체의 키들을 ["1", "2"] 형식의 배열로 리턴해줍니다. 그리고 그 키들을 이용해서 SmallImage 컴포넌트에 전달했습니다. LongImage 컴포넌트는 하나뿐이라 그냥 값들을 하드코딩했습니다.

저랑 같은 화면이 보이시나요?

귀여운 동물들을 보니 힐링되지 않나요? 

전체소스 코드 깃허브에서 확인하기