[2024~2025 동계모각코] 5회차 결과

41강

JSX에는 {} 사용 가능 : IN 시작과 끝

• 요소 태그 사이, 속성 값으로 사용 가능
• 자바스크립트 표현 아무거나 넣을 수 있음 > 이 내용의 결과가 화면에 출력이 되는 것임

reactDescription : 상수로 저장되어 있음! 배열 형태로

• 변수 또는 상수로 미리 저장해놓을 수도 있음
• 이렇게 하면 jsx 코드가 좀 단정해지니까 이걸 선호함

42강

이미지도 동일한 문법으로 작업할 수 있음

img src 이런 거 이용해서 해도 되지만 최적의 방법은 아님

작업물 배포시 이미지가 사라질 수도 있기 때문

배포 시 모든 코드가 변환 및 최적화되고 함께 묶여짐 > 이 과정에서 무시되거나 유실될 수 있음

import 사용하기!!!!

import reactImg form ‘./상대경로’ > 이 형태로 저장해준다.

그러고 기존의 img src 안에는 {}를 통해 reactImg를 넣어주면 된다

따옴표를 추가하지 않는 다는 점!! src={reactImg}일케 쓴다는 것!

결국 자바스크립트 객체가 되는거다 이미지가

43강

컴포넌트 장점 : 재사용 가능!

props : 데이터를 컴포넌트로 전달 및 사용 가능하게 함

App.jsx에 CoreConcept()라는 함수를 추가할 수 있음

• 매개변수는 보통 props라고 칭함
• 함수 내에서는 props.image 이런 식으로 데이터에 접근함

그러면

<CoreConcept title=”Components” /> 이런 식으로 사용 가능해짐

• title과 같은 친구들이 props임

44강

props 대체 문법

App.jsx 내에서 data.js의 내용을 가져오고자 함

import { CORE_CONCEPTS } from ‘data.js’; 이게 가능해야 함

동적으로 CoreConcept 안에 보여질 내용을 정할 수 있음

CORE_CONCEPTS[0].title 이런 식으로!

동적인 설정 가능

한 개의 컴포넌트로 다양한 화면을 보는 것이 가능해짐

그렇지만 최적의 상황은 아님 (반복적 코드 많음)

<CoreConcept {…CORE_CONCEPTS[0]}/> 이렇게 하면 더 짧아지겠지

CoreConcept 부분의 매겨변수에 {}를 넣음으로써 또 다른 활용법 가능

45강

단일 Prop 객체 전달

자바스크립트 객체로 이미 구성된 데이터가 있다면, 그 객체를 여러 Prop들로 나누는 대신 하나의 Prop 값으로 전달할 수 있습니다.

즉,

1. <CoreConcept 2. title={CORE_CONCEPTS[0].title} 3. description={CORE_CONCEPTS[0].description} 4. image={CORE_CONCEPTS[0].image} />

또는

1. <CoreConcept 2. {...CORE_CONCEPTS[0]} />

대신,

이처럼 CoreConcept 컴포넌트에 하나의 concept Prop를 전달할 수 있습니다 (Prop 이름은 선택적):

1. <CoreConcept 2. concept={CORE_CONCEPTS[0]} />

그러면 CoreConcept 컴포넌트에서는 그 하나의 Prop만 받게 됩니다:

1. export default function CoreConcept({ concept }) { 2. // Use concept.title, concept.description etc. 3. // Or destructure the concept object: const { title, description, image } = concept; 4. }

어떤 문법과 접근 방식을 선호하는지는 전적으로 여러분 선택입니다.

받은 Prop들을 단일 객체로 그룹화

여러 Prop을 컴포넌트에 전달한 다음, 컴포넌트 함수 내에서 자바스크립트의 "Rest Property"  문법을 사용하여 단일 객체로 그룹화할 수도 있습니다.

예를 들어, 컴포넌트가 이런 식으로 사용되었다면:

1. <CoreConcept 2. title={CORE_CONCEPTS[0].title} 3. description={CORE_CONCEPTS[0].description} 4. image={CORE_CONCEPTS[0].image} />

받은 prop들을 다음과 같이 단일 객체로 그룹화할 수 있습니다:

1. export default function CoreConcept({ ...concept }) { 2. // ...concept groups multiple values into a single object 3. // Use concept.title, concept.description etc. 4. // Or destructure the concept object: const { title, description, image } = concept; 5. }

이 구문이 헷갈릴 수도 있지만, 걱정하지 마세요! 이 강좌를 통해 이 구문의 구체적인 예시와 특정 상황에서 왜 사용하는지에 대한 내용을 살펴볼 예정입니다!

기본 Prop 값

가끔 선택적 Prop을 받을 수 있는 컴포넌트를 만들게 될 때가 있습니다. 예를 들어, ‘type’ Prop을 받을 수 있는 커스텀 Button 컴포넌트가 있습니다.

그러면 Button 컴포넌트는 type 설정 여부와 상관 없이 모두 사용할 수 있어야 합니다.

type 설정이 된 경우:

1. <Button type="submit" caption="My Button" />

되지 않은 경우:

1. <Button caption="My Button" />

이 컴포넌트가 작동하도록 하려면, type  Prop에 대한 기본 값을 설정할 수 있습니다 - 전달되지 않을 경우를 대비하는 것입니다.

자바스크립트는 객체 비구조화를 사용할 때 기본 값을 지원함으로 이를 쉽게 달성할 수 있습니다:

1. export default function Button({ caption, type = "submit" }) { 2. // caption has no default value, type has a default value of "submit" 3. }

46강

모든 컴포넌트가 한 파일에 app.jsx에 몰려있다

작업물의 크기가 계속 커지면 컴포넌트도 추가되며 파일이 커지기 때문에 이건 추천하지 않는다

별도의 컴포넌트 별로 저장하는 것이 좋다

연관성이 매우 높거나 같이 있어야 작동하는 경우만 한 파일에 추가하는 것을 목표로!!!

src 폴더에 저장할 수 있는 하위폴더에 저장

파일명은 컴포넌트 이름과 동일하게 저장

기존 App.jsx에는 어떻게 사용이 되는지 봐야 함

export default 를 통해 header.jsx에서 Headr를 내보내주어야함

import Header from ‘./components/Header.jsx’; 이런식으로 해서 사용한다

47강

컴포넌트 스타일 파일

프로젝트 코드의 다른 부분도 나눠서 저장!!!!

css 코드의 경우 헤더, 개념 항목 별로 다 모여 있따

이걸 컴포넌트별로 나눠서 저장한다!!!!

Header.css를 만들고 헤더 관련 css 코드들을 붙여넣는다.

자동으로 로딩되지 않기 때문에 알려줘야 함. index.css나 index.jsx에도!!!

import ‘./Header.css’ 이걸 Header.jsx에 넣는다

근데 이 Header.css에 있는 코드는 Header.jsx의 header에만 적용되는 것이 아니기 떄문에 App.jsx에서 header를 사용하면 동일한 스타일이 적용이 된다는 점 유의!!!

48강

children props

상호작용 섹션!!!1

app.jsx의 main부분에 section을 추가한다!!

내장 html 코드인 menu를 사용함 >> 버튼 목록 생성

TabButton.jsx를 만들어 사용하면 반복 코드를 줄일 수 있음

안에 props.children으로 사용을 한다고 해놓음

이 안에는 뭐 텍스트가 들어갈 수도 객체 구조가 들어갈 수도 있음

: 컴포넌트 합성

이것 말고 attribute를 사용할 수도 있다!!!!! 이건 취향 차이

49강

이벤트 처리하기

이제는 버튼을 클릭하면 어떠한 동작이 이루어지도록 해보자

TabBUtton.jsx로 먼저가서 eventlistener를 추가한다

그치만 선언적 코드로 적고 싶음!!

button onClick={함수명} 이런 식으로 사용한다!!

함수는 handel{이벤트명} 이나 {이벤트명}Handle 이렇게 적는다.

50강

함수를 props의 값으로 전달하기!!!

콘텐츠 영역에 보여주고 싶다

App.jsx 파일로 돌아가서 menu 밑에 동적 내용 출력 공간을 만들고 싶다

함수에 포인터 전달!!!!!

app.jsx에 함수 선언 및 onselect로 함수 전달 > button.jsx에서 그 함수를 매개변수로 받아 실제 html 코드 내에서 사용

51강

selectedButton을 이용해 어떤 버튼이 눌렸는지 알 수 있게 한다.

() ⇒ handleSelect()로 구조를 바꾼다

이걸로 인해 익명의 화살표 함수가 onSelect의 값으로 실행된다

handleSelect(’components’) 이런 식으로 해놓으면 이벤트별로 정의되는 함수를 구분할 수 있게 된다.