자식 컴포넌트 만들기

작업의 순서를 정해봅시다.

우선은 자식 컴포넌트들을 만든 다음에 api를 통해 정보를 불러오고 우리가 임의로 입력한 값들을 대체 하도록 하겠습니다. 일단 profile.js를 만들었으니 그 안에 필요한 코드들을 추가해 보도록 하겠습니다.

자식 컴포넌트 만들기

	import React from 'react';
	import './profile.css';
	const Profile = ({imgSrc, name, username, password}) => {
	return (
	<div className="profile">
	<div className="img">
	<ProfileImage imgSrc={imgSrc} />
	</div>
	<div className="text">
	<div>Name: {name}</div>
	<div>Username: {username}</div>
	<div>Password: {password}</div>
	</div>
	</div>
	);
	}

view raw profile.js hosted with ❤ by GitHub

const로 사용할 컴포넌트를 선언했습니다. 매개변수로 전달한 값은 { imgSrc, name, username, password } 입니다. 보통은 props라는 값을 많이 전달합니다만 저는 props라고 적는 대신에 이 객체를 구조분해해서 값을 받고 있습니다. 컴포넌트에 전달한 인수 값을 구조분해를 사용하든, props를 사용하든 기호에 맞게 사용하시면 됩니다.

props를 매개변수로 전달하셨다면 컴포넌트에서 사용하는 값들이 {name}, {username}, {password}가 아니라 {props.name}, {props.username}, {props.password}가 되어야합니다.

ProfileImage 컴포넌트 만들기

프로필 이미지의 경우 따로 컴포넌트를 또 만들어서 profile 컴포넌트에 삽입했습니다. 위의 코드의 중간에 보면 <ProfileImage imgSrc={imgSrc} />라는 부분이 나오는 것을 확인할 수 있습니다.

 

	const ProfileImage = ({imgSrc, alt}) => {
	return (
	<img src={imgSrc} alt={alt} title={alt} className="profile_image" />
	)
	}

view raw ProfileImage.js hosted with ❤ by GitHub

ProfileImage 컴포넌트의 경우 부모 컴포넌트에서 내려오는 이미지 주소 값을 그대로 받아서 사용합니다. 

프로필과 프로필 이미지 컴포넌트를 만들었으니 우리가 사용할 것들은 다 만들었습니다. 해당 코드들을 입력한 곳에 export default Profile; 을 입력해주세요.

자식 컴포넌트 확인하기

우리가 만든 컴포넌들이 잘 작동하는지 확인해볼까요?

	import React, { Component } from 'react';
	import './App.css';
	import Profile from './profile';
	class App extends Component {
	render() {
	return (
	<div className="App">
	<Profile
	imgSrc={"https://randomuser.me/api/portraits/men/65.jpg"}
	name={"honggildong"}
	username={"lemonCandy"}
	password={12345678}
	/>
	</div>
	);
	}
	}
	export default App;

view raw App.js hosted with ❤ by GitHub

자식 컴포넌트들이 있는 파일을 import 한 후에 값을 전달해주세요. 저는 임의적으로 imgSrc에는 랜덤유저생성기에서 가져온 이미지 사진을 넣고, name에는 "honggildong", username에는 "lemonCandy", password에는 12345678을 전달했습니다.

커맨드 창에서 yarn start를 입력하면 http://localhost:3000/ 에 연결되는 것을 확인할 수 있습니다.

우리가 입력한 값이 제대로 전달된 것을 확인할 수 있습니다.

에러없이 잘 따라오셨나요? 제가 입력한 값 대신 다른 값을 입력하셔도 되고, <Profile />컴포넌트를 몇개 더 넣어보세요. 에러가 있다면 댓글에 남겨주세요!

다음 포스팅은 랜덤유저 생성기를 통해서 우리가 사용할 정보들을 가져와보도록 하겠습니다.