1. update 구현 update의 기능은 read+create기능이다. update는 기존의 컨텐츠를 불러와서 내용을 추가해주는 과정이기 때문이다. 먼저 form 기능이 구현되어있는 CreateContent컴포넌트를 복사하여 외부파일로 만들어주고, UpdateContent로 이름지어준다. 다음으로 App.js에서 mode가 update로 바뀌면 Update컴포넌트로 바꾸어주기 위해 Create때와 똑같이 조건문을 추가하여 컴포넌트를 생성해준다. 바뀌는 컴포넌트를 생성해주는 부분을 잘라 함수로 만들어, 밖으로 빼준다. getContent()안에 내용들을 render밖으로 빼내, return _article을 해준다. 컴포넌트가 들어가는 부분이었던 {_article}을 {this.getContent()}..
0. props vs state 쉽게 말해서 props는 해당 컴포넌트 내에서 바꿀 수 없으며, state는 바꿀 수 있다. 또한, state는 내부적으로 쓴다. 외부에서는 props를 통해 컴포넌트를 만진다. 이 모든 것은 DOM에 영향을 주어 UI에 변화를 준다. 결론은...props와 state를 적절하게 이용해야 한다는 의미이다. 지금까지는 read가 되는 페이지를 만들었는데, 이제 write를 통해 동적으로 페이지를 유저가 바꾸는 앱을 만들어보자!! 두둥!! 1. create 구현 : 소개 모든 정보는 CRUD 안에 있다고 한다. Create, Read, Update, Delete를 의미하는데, 우리는 이미 read를 해보았다. create, update, delete라는 버튼을 추가할 것이다...
1. State변경과 render함수 현재 상태는 위와 같다. 먼저 설계(?)를 해보자면, -제일 위에 위치한 WEB에 링크를 달아서 링크가 눌리면 밑에 Content컴포넌트에 Welcome이라는 텍스트가 뜨게 할 것 -TOC에서 각 항목을 누르면 해당하는 내용을 Content컴포넌트에 보여줄 것 먼저 우선적으로 링크를 달 것이다. Subject.js에서 먼저 링크를 달아준다. 이 각 링크에 이벤트를 연결할 것이다. 링크를 누르면 App컴포넌트의 state가 바뀌고, Content의 props값으로 전달되면서 동적으로 앱이 바뀌는 것을 만들어 볼 것이다. 다음으로 state를 세팅해보자. 현재 페이지가 welcome페이지인지 read페이지인지 구분하기 위해서 state에 mode라는 값을 둘 것이다. m..
1. State 입문자에겐 State와 props의 차이를 이해하기 어렵다. (물론 나도) 어떤 제품이 있을 때, 사용자의 UI들이 리액트의 관점에서는 props이다. 반대로 내부적인 구현을 위해 상태를 다양하게 바꿀 수 있는 것을 state라고 한다. 즉 개발자의 입장에서는 state를 주목해야 한다. state는 props의 값에 따라 내부 구현에 필요한 것이라고 얘기할 수 있다. 사용자는 props를 통해 컴포넌트를 마음대로 조작할 수 있지만, state는 건드릴 수 없으며, 또한 알아서도 안된다. 옆의 그림처럼 내부 state는 철저히 분리되어있다. 2. State 사용 App.js를 보면, App컴포넌트 안에 Subject라는 하위 컴포넌트가 존재한다. Subject 안에 있는 props들을 s..
1. Default Props props의 기본값을 주고 싶을 때나, 경우에 따라 비워놔야 할 때가 있다. 그러한 경우에 props의 기본값을 설정해 줄 수 있는데, 그것이 바로 defaultProps이다. 저번 App.js파일의 마지막 컴포넌트인 밑에 새로운 라는 컴포넌트를 만들어 보았다. 에서는 하나의 props를 가지는데, props의 이름은 dp(defaultProps의 줄임말....인데.....동적 프로그래밍이 생각난다...ㅎㅎ)으로 정하였다. defaultProps는 render() 함수 전에 적어준다. 그리고 App컴포넌트에 defaultProps값이 잘 출력되는지 확인하기 위해 (App.js에서) 17line에는 props값을 지정해주었고, 18line에는 그냥 컴포넌트 명만 적어주었다. ..
1. Component 분리의 필요성 현재 코드를 보면 4개의 컴포넌트들이 있다. 하지만 만약 천개, 만개의 컴포넌트들이 있다면? 그리고 외부의 다른 파일에서 컴포넌트들을 사용하고 싶다면? 이는 컴포넌트들을 각 다른 파일로 분리하는 것으로 해결할 수 있다. 훨씬 더 코드가 간결해지며, 필요한 컴포넌트들을 빨리 찾을 수 있고, 또한 App.js말고 다른 파일에서도 사용이 가능하다. 2. Component 분리 1) 먼저 src디렉토리에 components라는 디렉토리를 만든다. 2) 디렉토리에 새로운 파일을 만든다. 저번에 만들었던 TOC컴포넌트를 분리하기 위해 TOC.js파일을 만들어 보았다. 3) 컴포넌트를 그대로 붙여넣는다. 빨간줄이 생길텐데 그 이유는 import React, {Component} ..
