Language/React25 [React] 컴포넌트 이벤트 만들기 - 3 이번에는 클릭한 Content가 본문에 표시되게 하려고 합니다. Content가 여러개 있기 때문에 App의 state에다가 id를 줘서 우리가 현재 선택된 Content를 표시하려고 합니다. id 값을 통해 일치하는 것을 통해 표시하려고 합니다. 만약 data의 id 값과 this.state.selected_content_id 가 일치하게 된다면 Content가 바뀌게 하겠습니다. 우선 constructor(생성자) 부분에 selected_content_id 부분을 지정해주고 TOC가 리스트이니까, onChanegePage 이벤트가 발생했을때 this.setState를 통해 mode 의 값과 함께 selected_content_id를 지정하도록 하면 됩니다. App.js import React, { C.. 2020. 12. 22. [React] 1-1. 리액트 이해 리액트는 구조가 MVC, MVW 등인 프레임워크와 달리 오직 V(view) 만 신경 쓰는 라이브러리이다. 컴포넌트: 특정 부분이 어떻게 생길지 정하는 선언체 초기랜더링: 어떤 UI 관련 프레임워크, 라이브러리를 사용하든지 간에 맨 처음 어떻게 보일지를 정하는 초기 렌더링이 필요하다. render() 함수는 컴포넌트가 어떻게 생겼는지 정의하는 역할을 한다. 이 함수는 html 형식의 문자열을 반환하지 않고, 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환한다. 컴포넌트 내부에는 또 다른 컴포넌트들이 들어갈 수 있다. 이 때 render 함수를 실행하면 그 내부에 잇는 컴포넌트들도 재귀적으로 렌더링한다. 이렇게 최상위 컴포넌트의 렌더링 작업이 끝나면 지니고 잇는 정보들을 사용하여 HTM.. 2020. 10. 27. [React] 1-10. document 를 접근하는 ref ref document.querySelector('input').focus() 위의 코드처럼 자바스크립트에서 직접 접근할 때는 보통 직접 'document' 키워드를 통해 접근하였지만, 리액트에서는 직접 document를 통해 접근하는일은 거의 없다. 리액트가 화면을 컨트롤 할 수 있게 하는 것이 좋다. 리액트 개발을 하다보면 DOM 에 직접적인 접근을 해야 할 때가 있습니다. 그럴 때는 ref 라는것을 사용한다. 아래 예와 같이 input 등에 focus를 해야할 때 특정 DOM의 크기를 가져와야할 때 외부 라이브러리(플레이어, 차트)를 사용할 때 hello; // 클래스 선언 render(){ return ( {this.state.first}곱하기{this.state.second}는? {this.he.. 2020. 9. 25. [React] Module not found: 'redux' Module not found: 'redux' error가 뜬다면 npm i redux 또는 npm install --save redux 로 해결 가능하다. 2020. 8. 18. 이전 1 2 3 4 5 6 7 다음
