023. props의 자식 Component에 node 전달하기

PART 2(초급) React.js 기초 다지기023. props의 자식 Component에 node 전달하기 node from App.js구조 : App └── PropsNode └── spanApp : 상위(부모) 컴포넌트R023_PropsNode = : 하위(자식) 컴포넌트 : PropsNode의 children으로 전달된 요소{this.props.children}부모인 App이 을 자식 컴포넌트인 사이에 넣어서 전달함

  • format_list_bulleted Study/초보자를 위한 리액트 200제
  • · 2026. 5. 11.
  • textsms

022. props를 기본값으로 정의하기

PART 2(초급) React.js 기초 다지기022. props를 기본값으로 정의하기defaultProps 문법 : props의 기본값은 부모 컴포넌트에서 값이 넘어오지 않을 때 사용부모 컴포넌트에 값이 지정 되어 있으면 부모 컴포넌트의 값이 우선적으로 사용됨없으면 defaultProps 에 지정해둔 기본값이 사용됨

  • format_list_bulleted Study/초보자를 위한 리액트 200제
  • · 2026. 5. 8.
  • textsms
021. props를 필수 값으로 사용하기

021. props를 필수 값으로 사용하기

PART 2(초급) React.js 기초 다지기021. props를 필수 값으로 사용하기props의 자료형 선언 시, 자료형 설정 대신 isRequired를 조건으로 추가하면 변수값 없는 경우 경고메세지 발생할 수 있음현재 상위 컴포넌트에서는 ReactString의 값을 전달하지않음원래는 콘솔창에서 에러나는 모습이 보이는게 정상이지만(화면은 정상), 현재 react가 상위 버전이라 에러가 나지않는 중 부모(상위)와 자식(하위) 컴포넌트를 구분하는 기준은 '어디서 어디를 호출(사용)하느냐' Parent Component:다른 컴포넌트를 불러와서 사용하는 쪽 (코드상에서 태그를 쓰는 곳)App.js는 PropsRequired를 포함하여 화면에 그리고 있으므로 상위 컴포넌트Child Component: 불러..

  • format_list_bulleted Study/초보자를 위한 리액트 200제
  • · 2026. 5. 6.
  • textsms

020. props 객체형으로 사용하기

PART 2(초급) React.js 기초 다지기020. props 객체형으로 사용하기 props 값을 객체로 하위 컴포넌트에 전달할 경우 자료형을 object로 선언but, 객체 형태(객체 내부 변수들)의 자료형을 선언할 때는 shape 라는 유형을 사용Object Json - Syntax Error... 오래된 교재의 차이 ㅠ

  • format_list_bulleted Study/초보자를 위한 리액트 200제
  • · 2026. 5. 5.
  • textsms

019. props Boolean으로 사용하기

PART 2(초급) React.js 기초 다지기019. props Boolean으로 사용하기props 값을 Boolean형으로 하위 컴포넌트에 전달할 경우 true나 false 중 하나를 할당함props 변수를 선언한 후 값을 할당 안하고 넘기면 기본값은 true

  • format_list_bulleted Study/초보자를 위한 리액트 200제
  • · 2026. 5. 3.
  • textsms
018. props 자료형 선언하기

018. props 자료형 선언하기

PART 2(초급) React.js 기초 다지기018. props 자료형 선언하기자식 컴포넌트에서 props에 대한 자료형을 선언해놓으면, 부모 컴포넌트에서 넘어오는 props 변수들의 자료형과 비교함. 이때 자료형이 일치하지 않으면 경고메세지로 알려줌원래 String: datatype.number 부분때문에 자료형 불일치로 인하여 콘솔에 경고가 떠야하지만, 현재 React 버전으로 인하여 출력되지않음교재 버전 (React 17 이하) → propTypes 경고 뜸 ✅현재 버전 (React 19) → propTypes 지원 제거 → 경고 안 뜸 ❌

  • format_list_bulleted Study/초보자를 위한 리액트 200제
  • · 2026. 5. 2.
  • textsms