Library | Framework22 [React] 컴포넌트 이벤트 만들기 복습/응용 서론 저번엔 WEB을 클릭하면 state의 mode값을 welcome으로 바꿔 TOC 내용을 바꿔보았었다. 그래서 이번 글은 저번 글에서 배웠던 컴포넌트 이벤트를 복습하고, 응용하는 글이 되겠다. 목표 동영상처럼 이때까지 구현한 웹 페이지에서 HTML, CSS, JS 를 누르면 각각의 정보를 밑에 보여주는 것이 이번 글의 목표임 한 번 만들어봅세. 일단 state에 클릭된 content(html, css, js)가 무엇인지 알기 위해 일종의 id 역할을 하는 프로퍼티를 만든다. selected_content_id와 contents의 id를 비교해서 그 id의 content를 보여주는 것이다. 그리고 TOC 컴포넌트에 data 속성을 만들어 state의 contents를 할당해준다. 또, onChangeP.. 2022. 1. 5. [React] 컴포넌트 이벤트 만들기(onChangePage) 서론 {this.state.subject.title} {this.state.subject.sub} 저번 글에선 위 코드의 태그를 App.js 컴포넌트에 옮겨 놓았었는데, 이 글에서는 태그를 주석 처리하고 주석 처리했었던 컴포넌트를 다시 쓰겠다. 이제 Subject 컴포넌트에 태그를 클릭하면 onChangePage 이벤트를 발생시키는 기능을 만들어보자! 컴포넌트 이벤트 만들기 일단 App 컴포넌트에서 Subject 컴포넌트에 onChangePage 함수를 추가한다. 그리고 테스트용으로 onChangePage 함수는 alert("hi")를 실행하게 된다. class Subject extends Component { render() { console.log('Subject render'); return( {t.. 2022. 1. 5. 이전 1 ··· 6 7 8 9 10 11 다음
