728x90 반응형 props3 useContext Hook 다음 그림과 같이 부모 컴포넌트의 값 변경을 자식 컴포넌트로 전달해서 반영하는 경우, 부모 컴포넌트의 상태 변수를 자식 컴포넌트의 props 변수로 설정해서 전달합니다. import { useState } from "react"; import './App.css'; const GrandParent = () => { const [grandParentSay, setGrandParentSay] = useState(''); return ( GrandParent GrandParent say setGrandParentSay(e.target.value)} /> ); }; const Parent = ({grandParentSay}) => { return ( Parent ); }; const Child = ({grand.. 2023. 2. 22. 20230202 실습내용 이벤트 핸들링 예제 EventPractice.js EventPracticeFunction.js 조건부 렌더링 Greeting.js Counter.js MailBox.js Warning.js 리스트 형태의 데이터 처리 IterationSample.js 실행결과 프로젝트 생성 방법은 아래 글 참조 https://myanjini.tistory.com/entry/20230131-%EC%8B%A4%EC%8A%B5%EB%82%B4%EC%9A%A9 2023. 2. 3. 20230201 실습내용 신호등, 댓글 컴포넌트를 함수형 컴포넌트를 클래스형 컴포넌트로 변경 Lamp.js TrafficLight.js Comment.js CommentList.js 부모 컴포넌트의 state 변수를 props 변수로 자식 컴포넌트로 전달 Title.js Todo.js 컴포넌트의 생명주기 함수 사용 Notification.js NotificationList.js 자식 컴포넌트에서 발생한 이벤트로 부모 컴포넌트의 state 변수를 변경 App.js - Parent, Child 프로젝트 생성 방법은 아래 글 참조 https://myanjini.tistory.com/entry/20230131-%EC%8B%A4%EC%8A%B5%EB%82%B4%EC%9A%A9 2023. 2. 2. 이전 1 다음 728x90 반응형
