EVENT2 리액트 기초 : Event(2) 이번엔 상위 컴포넌트에서 정의한 메서드를 하위 컴포넌트에서 실행시켜보겠다. 메서드의 경우에도 props를 이용하여 전달받을 수 있다. 1) 상위 컴포넌트의 메서드 하위 컴포넌트에서 실행 상위 컴포넌트에서 hihihi를 alert하는 메서드를 만들고 이를 하위 컴포넌트에서 실행시키고자 한다. App.js /*----중략---*/ /*----중략---*/ Subject.js /*----중략---*/ return ( {this.props.title} {this.props.sub} ); /*----중략---*/ App.js에서 onChangePage라는 function이 alert이 되도록 정의하고, Subject.js에서 클릭 시 props를 이용하여 해당 메서드를 호출하였다. 결과 상단의 WEB 글자를 클릭.. 2022. 5. 4. 리액트 기초 : Event(1) 리액트는 state의 값이 변경되면 render를 재호출하여 유저가 보이는 html을 다시 생성한다. 이번 실습 내용은 mode의 값에 따라 컴포넌트의 랜더링 결과가 변경하도록 하는 것이 목적이다. 1. 클릭 할 때마다 span의 내용이 변경되는 버튼 import './App.css'; import { Component } from 'react'; import Subject from './Subject'; import Toc from './Toc'; import Content from './Content'; class App extends Component { constructor(props){ super(props); this.state={ mode : 'read', subject:{title:"WEB.. 2022. 5. 3. 이전 1 다음 반응형
