[2주차] 강의 및 피드백

[minjeongss]

[9월 28일] 온라인 문서 스터디

[minjeongss]

피드백 @Dana2808

컴포넌트 생성 및 활용은 정말 잘하셨습니다.
다만 props를 모든 컴포넌트에서 활용하지 않으셨어요!

NameCard 컴포넌트-Profile 컴포넌트끼리 props를 전달하고 받는 방법에 대해 예시를 들겠습니다.

//NameCard.jsx
<Profile 
                img='https://plus.unsplash.com/premium_photo-1680946468196-a53273b001b8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80'
                name='KimMinjeong'
                describ='Im frontend developer!'
/>

//Profile.jsx
import React from 'react';
export default function Profile({img,name,describ}) {
    return (
        <div style={{textAlign:"center"}}>
            <img
                src={img} 
                alt="profile"
                style={{
                    borderRadius: "50%",
                    width:"300px",
                    height: "300px",
                    objectFit: "cover"
                }}
            />
            <h1>{name}</h1>
            <h3>{describ} 🎉</h3>
        </div>
    );
}

이러한 방식으로 NameCard 컴포넌트에서 Profile 컴포넌트를 불러올 때 img, name, describ에 원하는 값을 전달하게 됩니다.
Profile 컴포넌트에선 function Profile({img,name,describ)}에 매개변수로 받아와서 return 구문 안에서 {img}, {name}, {describ}으로 사용하게 됩니다.

예시를 참고하셔서 Contact와 Projects도 props를 이용해 값을 전달하는 방식으로 코드를 수정해주세요!

[minjeongss]

피드백 @Baebin

컴포넌트 생성 및 활용부터, props 전달과정까지 모두 완벽히 잘 수행하셨습니다!
동일한 컴포넌트를 효율적으로 활용하기 위해 props의 전달이 얼마나 중요한 것인지를 스스로 체감하셨기를 바랍니다.
추가적으로, 매개변수 이름도 수정을 하셔서 더 보기 좋은 코드를 구성하셨군요! describ을 길게 description으로 표현하는 방식이 좋았습니다.

2주차 과제 완료되셨습니다. 수고 많으셨어요! 🎉

[minjeongss]

피드백 @jban1001

1차 피드백

컴포넌트 생성 및 활용부터, props 전달과정까지 잘 수행하셨습니다!
다만 Projects 컴포넌트, Contacts 컴포넌트에선 props 전달 과정이 완벽하나, Profile 컴포넌트는 사용되지 않은 것으로 파악됩니다.
변수 사용 연습을 위해 prop 전달 없이 Profile 컴포넌트를 구성하신 것이라면, 컴포넌트와 그 속에서 값들을 이용하는 방법을 잘 숙지하고 있다고 볼 수 있어요.

const name="Anjunbeum";
const describ="I'm pikachu!";

만일 의도적인 Profile 컴포넌트 구성이 아니었다면, Profile 컴포넌트 역시 Projects, Contacts 컴포넌트와 동일하게 재구성 해주세요! 😃

2차 피드백

Profile 컴포넌트에서 prop를 전달하는 과정 잘 구현하셨네요!
피드백을 드린 이후에 파일을 수정하는 것은 course>src>Components>Profile의 경로로 수정하시면 됩니다. 따로 course 밖으로 꺼내어 Pages와 Components Directory를 생성하여 보여주실 필요는 없어요!
즉, course 안에 존재하는 Profile 컴포넌트를 수정하시면 된다는 말입니다.

2주차 과제 완료되셨습니다. 수고 많으셨어요! 😉

[minjeongss]

피드백 @{JeongJimin}

온라인 참여이었음에도 불구하고, 명함 제작 실습까지 잘 오셨습니다!
모든 컴포넌트에서 props 전달 과정을 이해하시고, 잘 변경하셔서 본인의 명함을 만드셨군요!
특히 Profile 컴포넌트가 인상적이었습니다. (っ˙˘˙)っ

2주차 실습 완료되셨습니다. 🎉