비엣맨의 공부 노트 비엣맨의 공부 노트

App.js Create 기능 뿐만 아니라, 전체적으로 복습 겸 아래 흐름을 되짚어 보자. ■ this.max_content_id = 3 의 의미는, 그 밑에 create를 통해 content id 를 1개씩 추가해주기 위해, 초기 값을 정해준 것이다. (이 때, 초기값 3은 id this.state.contents의 마지막 id값이 3이기 때문. 이를 state안에 두지 않는 이유는, ui 와 전혀 상관없는 로직이기 때문에 밖에다 둔 것이다. (안에 두어도 되긴 하지만, 불필요함 / 성능 저하 ■ 컴포넌트는 총 5개로 구성 되어 있다. 1) Subject 2) TOC 3) Contol 4) ReadContent 5) CreateContent 각 각의 컴포넌트에 대해서 아래 하나씩 살펴보자. import..

이벤트 시작 개념 리액트의 꽃 이벤트를 알아보자. 아래 코드 내용은 mode가 'welcome' -> 'read' 로 바뀌게 되면 관련 title과 desc가 변경되도록 만든 구조이다. 이 mode를 변경하기 위해서는 개발자모드에서 수기로 바꿔주면 가능하다. 하지만 개발자모드가 아닌 웹화면에서 특정 이벤트처리를 해줘서 사용자와 상호작용을 해보면 얼마나 좋을까. 이는 다음 내용에 담겨 진다. 일단 아래 코드 내용을 눈으로 이해해보자. import React, { Component } from 'react'; import TOC from "./components/TOC"; import Content from "./components/Content" import Subject from "./components..

기존에는, class App 부분에 props 값이 바로 하드코딩되어서 들어갔다. 하지만 이는 좋지 않다. 내부적으로 구동되는 부분을 최대한 뒤로 숨기게 하는 것이 좋은데, 이를 state 가 담당한다. 아래 코딩 내용 참고 import React, { Component } from 'react'; import './App.css'; import TOC from "./components/TOC"; import Subject from "./components/Subject"; import Content from "./components/Content"; class App extends Component { constructor(props) { super(props); this.state = { subjec..

이전에는 App.js 1개 파일안에 여러 컴포넌트가 존재했다. 컴포넌트의 재사용성을 위해 각 각의 컴포넌트를 각 각 파일로 만들어주어 관리 및 재사용하기 좋게 만들어 줄 수 있다. App.js 는 아래와 같이 각 각의 컴포넌트를 import해왔고 import React, { Component } from 'react'; import './App.css'; import TOC from "./components/TOC"; import Subject from "./components/Subject"; import Content from "./components/Content"; class App extends Component { render() { return ( ); } } export default Ap..

이전 컴포넌트는 고정 data가 들어가고 컴포넌트 내용을 변경시키기 위해서는 해당 내용을 class 컴포넌트값을 수정해주어야 했다. 하지만 이러한 번거로움을 없애고자 바로 class App 에서 변경할 수 있게 해주는 방법이 있다. 따라서, 코드의 재사용성이 증가 될 수 있다. 예를들어 아래 class App의 Subject 부분의 title 내용만 바꿔주면 다른 포맷은 동일하고 title내용만 바뀌어, 쉽게 여러 Subject를 생성해 줄 수 있다. import React, { Component } from 'react'; import './App.css'; class TOC extends Component { render() { return ( HTML CSS JavaScript ); } } clas..