작은 이미지 컴포넌트와 긴 이미지 컴포넌트 만들기레이아웃과 제목 부분은 만들었으니 이제는 이미지를 넣을 컴포넌트들을 만들어야 합니다. SmallImage 컴포넌트와 LongImage 컴포넌트라고 하고 코드를 작성해보겠습니다. Long Image 컴포넌트와 Small Image 컴포넌트는 너비와 높이 빼고는 코드가 똑같아서 같이 하나의 컴포넌트로 구성해도 상관없지만 분리하는게 좀 더 단순하게 느껴질 것 같아서 따로 작성했습니다. 게슈탈트의 Box와 Image를 통해서 만들었고, 부모 컴포넌트로 부터 alt값과 src 값을 받아옵니다. 그래서 매개변수로 props를 주고 alt에는 {props.alt}, src에는 {props.src}를 전달했습니다. 컴포넌트를 만들었으니 이제 컴포넌트 안에 넣을 값들을 구..
작업의 순서를 정해봅시다.우선은 자식 컴포넌트들을 만든 다음에 api를 통해 정보를 불러오고 우리가 임의로 입력한 값들을 대체 하도록 하겠습니다. 일단 profile.js를 만들었으니 그 안에 필요한 코드들을 추가해 보도록 하겠습니다. 자식 컴포넌트 만들기const로 사용할 컴포넌트를 선언했습니다. 매개변수로 전달한 값은 { imgSrc, name, username, password } 입니다. 보통은 props라는 값을 많이 전달합니다만 저는 props라고 적는 대신에 이 객체를 구조분해해서 값을 받고 있습니다. 컴포넌트에 전달한 인수 값을 구조분해를 사용하든, props를 사용하든 기호에 맞게 사용하시면 됩니다. props를 매개변수로 전달하셨다면 컴포넌트에서 사용하는 값들이 {name}, {user..