[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를 할당해준다.

또, onChangePage 속성을 추가해 id라는 인자를 가지는 함수를 만든다.

그리고 이 함수가 실행되면 state의 mode가 read로 바뀌고 seleted_content_id는 함수로 넘어온 id로 바꿔준다.

 

TOC.js

다음, TOC.js에서 App 컴포넌트에서 넘겨준 data를 또 다른 변수 'data'를 만든다.

data-id에 i번째의 id값을 할당한다. 여기서 data-id는 data-abc, data-hi 이런 식으로도 만들 수 있다.

그래서 클릭했을 때(onClick) 함수가 실행되면서 태그의 기본적인 동작을 못 하게 한다.

그리고 onChangePage로 dataset의 id 즉, data-id의 값을 보낸다.

 

다시 이 부분을 보면 TOC 컴포넌트에서 넘겨준 id값을 selected_content_id로 할당한다.

여기서 id를 문자열로 넘겨줬기 때문에 Number()를 이용해 숫자로 바꿔준다.

 

마지막으로 App 컴포넌트 render() 함수에 이 코드를 넣어준다.

저번이랑 if문은 같지만 else if문이 달라진다.

일단 계속 1씩 증가할 변수 i를 선언하고, this.state.contents.length까지 즉,

 

3까지 while문을 반복한다.

data 변수에 i번째 data를 넣고, data의 id와 selected_content_id와 같으면 data를 보여준다.

 

이렇게 하면 정상적으로 잘 작동될 거고, 오류나 고칠 부분이 있다면 부탁드립니당