[TIL] D+53 / React입문 / React - 프로젝트, 컴포넌트와 JSX, props

2025_1_3 금요일

+ 코딩 19일차

 

 

 

📝 Lastday I Did
ReactJS와 ReactJS의 SPA 그리고 런타임 환경에 대해 배웠고,
UX집중반에서 5Whys를 이용하여 문제정의까지 완료하고 제출했다.

 

 

 

💫 Today I Did

→ React프로젝트, 컴포넌트와 JSX, props에 대해 배웠고,
UX집중반에서 '문제정의'에 대한 피드백을 받는 시간을 가졌다.🙆‍♂️

 

 

 

 

---

 

 

✅  배운점

 

 

 

 

 

React 프로젝트 살펴보기

→ React는 root라는 div에 main.jsx로 만든 여러가지 UI들이 구성되어가면서,
scr방식으로 UI를 만들고 수정한다.

 

 

main.jsx

 

 

App.jsx

우리가 코드를 실제로 작성할 메인 플레이그라운드

html과 유사한 코드 방식

브라우저에서 보여지는 것과 동일한 파일

 

 

 

 

---

 

 

React Components(컴포넌트)

→ React에서 아주 필수적인 개념, React에서는 컴포넌트를 기반으로 작성

 

" 컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다"

 

 

 

 

리액트 컴포넌트 표현하는 방법

함수형 컴포넌트

→ 리액트 세계에서 말하는 컴포넌트(블럭) = 함수

// props라는 입력을 받음
// 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return)

function Welcome(props) { 
  return <h1>Hello, {props.name}</h1>;
}

// 훨씬 쉬운 표현을 해보면 아래와 같다
function App () {
	return <div>hello</div>
}

 

 

 

주의 사항

• 컴포넌트를 만들 때 반드시 가장 첫 글자는 대문자로 만들어야 한다.(파스칼 케이스)
• 폴더는 소문자로 시작하는 카멜케이스로 작성하고, 컴포넌트를 만드는 파일은 대문자로 시작하는 파스칼케이스로 이름을 짓습니다.

 

 

 

부모자식 컴포넌트

→ 컴포넌트는 다른 컴포넌트를 품을 수 있다.

이때 다른 컴포넌트를 품는 컴포넌트를 부모 컴포넌트라고 부르고,
다른 컴포넌트 안에서 품어지는 컴포넌트를 자식컴포넌트라고 부릅니다.

function App () {
  return <div>
    <h1>부모-자식 관계 테스트</h1>
    <GrandFather /> // 이 안에 할아버지
    </div>;
}

export default App;

function GrandFather () {
  return <div>
    <p>나는 할아버지입니다</p>
    <Mother /> // 할아버지 안에 엄마
  </div>;
};

function Mother () {
  return <div>
    <p>나는 엄마입니다</p>
    <Child /> // 엄마 안에 자식
  </div>;
};

function Child () {
  return <div>
    <p>나는 자식입니다</p>
  </div>;
};

 

 

위의 코드는 브라우저에서 아래와 같이 출력된다

 

 

---

 

 

JSX문법

JSX  ➡️  HTML을 품은 JS

 

→ 문자열 ❌, HTML❌

→ 자바스크립트를 확장한 문법
자바스크립트의 모든 기능이 포함되어 있으며, Recat Element를 생각하기 위한 문법

// Javascript 코드지만 html요소처럼 생김.
// html적인 요소

const element = <h1>Hello, world!</h1>;

 

 

 

---

 

 

Props(=properties)

→ 컴포넌트끼리 어떤 값을 주고 받을 때, 속성과 같이 쓸 수 있다.
→ 부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터

1. props는 반드시 위에서 아래 방향으로 흐른다. 즉, [부모] → [자식] 방향으로만 흐른다(단방향).
2. props는 반드시 읽기 전용으로 취급하며, 변경하지 않는다.

props가 자식 컴포넌트로 내려갔을 때, 자식컴포넌트에서는 하나의 객체로 props에 담긴 모든 값들을 담는다.(children포함)

 

Props Children

→ props와 비슷하게 부모 컴포넌트에서 자식 컴포넌트로 값을 내려주는 또 다른 방법
→ 부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터

Layout 컴포넌트를 만들 때 주로 사용

 

 

 

---

 

 

 

 

📊 UX집중반

이번 주차는 지난주 '문제발견'에 이어서 '문제정의'에 대한 결과를 피드백 받는 시간을 가졌다.

 

우리 팀의 피드백을 정리해보자면,

문제의 범위가 매우 커졌고, 너무 본질적인 문제여서 솔루션을 낼 수 있는가에 대한 물음이 있었고,

문제가 너무 커지다보니 방향을 설정하기 상당히 어려운 문제였다.

하지만 그 이후에 조금 더 구체적인 문제를 찾았고, 방향성을 설정할 수 있었다.

그리고 문제 정의를 위한 5Whys에서 리서치 데이터만으로 만들어졌는지, 주관적인 의견이 들어가진 않았는지 확인해볼필요가 있다!

 

피드백에 대해서 마지막 문제정의 단계에서 5Whys 질문에 대한 답중 우리는 리서치 자료가 있지만,

장표에 들어가지 않아 조금 오해를 살 수 있는 부분을 발견했다!

우리팀은 방향성을 설정하는 시간에 시간을 많이 소요해서 문제정의에서 시간을 많이 쓰지 못해 조금 아쉽지만,

확인해볼 문제를 찾아서 잘 정리한다면, 부족함이 없는 꽤나 만족스러운 결과라고 생각한다!

 

---

 

 

 

⭐️  느낀점

어제까지 집중반에 완전 몰두해있었던 터라, 오늘은 강의를 듣는 것을 목표로 학습을 진행했다.

하지만 오늘 들은 강의 내용이 길어서 진도를 많이 빼지는 못한것 같아서 아쉽다...

주말에 들어야지 모....(나의 주말은 어디에...)

 

일단에 소문으로 들었던 'React에 들어가면 주말을 반납해야할 것 이다'라는게 현실이 되었다...

코딩에 주말을 쓴다는 것이 매우매우 억울하지만, 집중반을 통해 디자인적 역량을 키우기 위해서는 어쩔 수 없다고 생각한다🥹