11주차:파트05: props, optional chaining

CHAPTER 1. props

✅props

리액트에서 props란 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달해주는 객체이다.상위 컴포넌트에서 어떤 데이터를 보낼 것인지를 정하면 이 데이터를 props를 통해 객체 형태로 하위 컴포넌트로 보낸다.

props는객체 형태  {key: "value"} 데이터 형태를 가지고 있다.

props값으로 함수 값도 받을 수 있다.

 

props는 마치 매개변수처럼 이용할 수 있다.

interface MyProps{
    weather:string
    children : React.ReactNode;
}
const MyWeather : React.FC<MyProps> = (props)=>{
    return(
        <div>
            {props.children}<p></p>
            오늘의 날씨는 {props.weather}입니다.
        </div>
    )
}

 

 

 

구조분해할당의 성질을 이용해 다음처럼 사용할 수도 있다.

1번 방법

2번 방법

 

 

 

클래스 컴포넌트를 사용하는 방법도 있다. this는 컴포넌트를 호출한 대상 객체를 뜻한다.

 

 

 

 

 

위 컴포넌트를 export한 후 app.tsx에서 불러올때 다음처럼 불러올 수 있다. 이때 태그 안 있는 "일기예보는"children이다.

 

 

 

 

 

https://velog.io/@donggu/%EB%AC%B8%EA%B3%BC%EC%83%9D%EC%9D%B4-%EC%84%A4%EB%AA%85%ED%95%98%EB%8A%94-React-propsproperties-children

[말로 풀어쓴 React] props(properties), children

 

 

 

CHAPTER 2. 자바스크립트의 optional chaining

 

✔️optional chaining

JavaScript에서 Optional Chaining(?.)은 객체의 특정 속성이나 메서드가 존재하지 않을 때 오류 없이 안전하게 접근할 수 있도록 해주는 문법으로 이를 통해 null 또는 undefined 상태에서 발생할 수 있는 오류를 방지할 수 있다.

optional chaining(?.)을 사용해 존재하지 않는 속성에 접근했을 때 undefined가 반환되며 프로그램이 종료되지 않는다.

 

다음과 같은 객체가 있다고 예시로 들면

const user = {
  name: '홍지나',
  address: {
    city: '서울'
  }
};

 

이 경우, user.address.city에 접근할 수 있다. 하지만 user.address.country와 같은 속성은 존재하지 않기 때문에, 이 속성에 접근하려고 하면 오류가 발생한다.

console.log(user.address?.city); // '서울'
console.log(user.address?.country); // undefined (오류 발생 없이 undefined 반환)
console.log(user.profile?.age); // undefined (오류 발생 없이 undefined 반환)