appmaster

우선 create 모드가 될때 나타나게될 코드를 정리하기위해 따로 CreateContent.js파일을 만듭니다. form태그에 action="/create_process"의 뜻은 옮겨지는 페이지를 "/create_process"라고 정하는 것이고 method="post"방식으로 해야지 내부정보를 볼 수 없습니다. onSubmit={fuction()}은 submit이 실행될때 꼭 지나야하는 함수입니다. 이것은 react기능이 아닌 기본적으로 가지고 있는 기능입니다. 본인이 만들 형태는 submit이 될때 새로운창에서 작동되지 않게 만들기 위해서 e.preventDefault()를 넣어줍니다. placeholder는 입력하기전에 무슨 텍스트가 화면에 나오게할지 정하는 겁니다. mode가 read일 경우와 c..

create, update는 a태그로 만들어지는것이 좋습니다. (새로운 창에서 데이터를 입력하고 조회하게 되므로.) 하지만, delete같은 경우, 새로운 창으로 연결되는 a태그로 만들지 않고 input button태그로 만드는것이 좋습니다. 1. Control이라는 컴포넌트로 만들어서 외부로 빼버릴겁니다. 그리고 그 컴포넌트를 App.js에 import한 후에 아까전에 위치한 자리에 컴포넌트를 추가해줍니다. 2. onChangeMode 이벤트(핸들러)를 Control컴포넌트에 정의해줍니다. Control.js파일에서 onClick이벤트를 만들어 줄때, 이것이 create, update, delete라는것을 알려주어야 합니다. 이 onClick이벤트를 만든 함수를 받기 위해서 Control컴포넌트에 on..

1. props는 스마트폰의 볼륨버튼이라면 사용자가 볼륨버튼을 누르면 state는 스마트폰안에서 스스로의 상태인 볼륨이 바뀌게 해놓은 모든 조치(회로,프로그래밍 등등)라고 할 수 있습니다. 2. 상위 컴포넌트는 하위 컴포넌트에게 props를 통해 값을 전달해 내부의 state를 바꾸기 때문에 컴포넌트 스스로 외부에서 전달되는 props를 변경하는 것은 금지되어 있습니다. 또한 하위 컴포넌트가 상위 컴포넌트를 동작시키려면 props를 전달하는 것이 아니라 상위 컴포넌트 안에 이벤트를 심고 그 안에 setState로 값을 바꿔야 합니다. props state 고정값 가변값 상위값 하의값, 사용자가 이벤트 요청시 변경 상위 컴포넌트 > props > 하위 컴포넌트 하위 컴포넌트 > 이벤트 실행 > 상위 컴포넌..

다음은 링크를 클릭했을 경우, 이벤트처리가 되어서 밑에 text값이 변경되게 하는겁니다. mode값을 텍스트로 수정하는것이 아닌, 클릭으로 수정하게 하는 방법입니다. 그렇게 하려면 render에 선언된 state와 return에 있는 state를 연결시키면 됩니다. 1. bind(this) 바로 이벤트 함수가 끝난 후, bind(this)를 선언해줍니다. 왜냐하면 무작정 event함수안에 this를 선언해버리면 "TypeError: Cannot read property 'state' of undefined" 오류가 생기기 때문입니다. 그런데 이렇게 선언해도 문제가 됩니다. this.state.mode = 'welcome' 은 state값이 변한다는걸 모르게하는 소스코드이기 때문이죠. 2. setState..

우선 Subject라는 컴포넌트를 풀어해치고 그 내용을 App에 도입시켜서 이벤트를 구현해보도록 하겠습니다. 1. 소스코드 해체하기 다음과 같이 props 형태로 잘 정리된 Subject 컴포넌트를 주석 처리를 하고, 그 밑에 Subject.js파일에 있는 소스코드를 그대로 들고와서 복사 붙혀넣기 했습니다. 2. state형식으로 수정 후 이벤트 처리해주기 이때 props형태인 소스코드를 state형식으로 바꿔줍니다. header라는 태그로 이벤트 처리를 다 하고, 다시 Subject 컴포넌트로 패키징을 해주는작업을 해줄겁니다. 이렇게 저장하고 실행을 하면 경고창이 잘 나옵니다. 하지만, 경고창에 확인을 누르면 화면이 다시 reload가 되는데, react는 reload시키지 않고도 역동적인 사이트를 만..

이번에는 어플리케이션을 역동적으로 만들 수 있는 이벤트를 살펴볼 겁니다. props + state + event가 3박자가 착착 맞으면서 어플리케이션의 역동성을 만들어 줍니다. 마구잡이로 이벤트를 걸어주면 소스코드가 복잡해지기 때문에, state에서 먼저 틀을 잡아줍니다. 여기서 중요하게 생각해야하는것은, state의 값이 변하면 그 state를 가지고 있는 컴포넌트의 render함수가 다시 호출이 됩니다. 그 render함수가 다시 호출됨에 따라서 그 render함수에 하위에 있는 컴포넌트들도 전부 다 호출이 됩니다. 그러면 화면이 전부 다 다시 그려지게 되는겁니다. 왜냐하면 render라는 함수는 어떤 html을 그릴것인가 결정하기 때문입니다. 즉, props나 state가 변하면 화면이 다시 그려지..

App클래스에 constructor의 값으로 render()내의 값을 주입시켜주면서 자동으로 데이터를 바꾸게 만들겠습니다. 굳이 TOC.js파일에 들어가지 않고도 데이터값이 변하게 만들어 줄겁니다. 1. 배열형태로 만들어주고, key값과 value값으로 만들어줍니다. contents라는 property를 state에 추가했습니다. 데이터가 여러개 이기 때문에 배열형태로 만들어 줬습니다. 그리고 그 안에 값을 key값과 value 값으로 만들었습니다. state값을 받기 위해서 this.state.contents로 주입시켜주었습니다. 2. TOC.js 파일로 이동합니다. 우선 내부적으로 살펴봅니다. TOC의 어떤값을 받고 있는지부터 파악합니다. App.js에서 선언한 내용을 보고 TOC.js에서는 this..

한번쯤은 render라는 함수 밑에 선언되어있는 props의 값이 맘에 안들때가 있을겁니다. 이 props의 값을 state로 만들고 그 state값을 subejct의 props로 전달하도록 만들겠습니다. 1. state값을 초기화 하는 과정입니다. 다음과 같이 선언하면. render함수보다 먼저 실행이 되면서 그 컴포넌트를 초기화 해주고싶은 코드를 constructor 안에 작성합니다. 2. state 초기값 설정 후 props값 설정합니다. 그래서 this.state로 초기값을 설정한후에, 그 설정된 값을 render함수 안에 있는 Subject 컴포넌트에 대입시킵니다. 그럼 index.js파일로 가볼까요? App이라고 선언된것만 봤을때는 state를 사용했다는것을 알 수 있을까요? 아닙니다. 전혀 ..

우선 이러한 클래스들이 만약 하나의 js파일에 천개 만개 이상이 들어간다고 상상해봅시다. 매우 복잡해 질 것입니다. 그래서 할 작업은, 각각의 컴포넌트들을 분해해서 작성해 보는겁니다. 1. SRC폴더 안에 components 폴더를 만드는 것입니다. TOC.js파일을 만들고 기존에 App.js파일 안에있는 TOC 소스코드를 긁어옵니다. 그런데 문제가 발생할겁니다. 다음의 문제인데요, 컴파일이 되지않는겁니다. 이것을 해결하기위해서는 import해야할 것이 있습니다. 이뜻은 Componenet라는것을 로딩하는 코드가 없다는 뜻입니다. 2. 파일안에 import해줍니다. 그럼 이뜻은 react라는 라이브러리에서 Component라는 클래스를 로딩한것입니다. Component 단어 앞에 React라는 단어는 꼭..

구글에서 검색후 React Developer Tools를 다운받습니다. 그리고 새로운창을 띄워서 F12를 누르고 옆에 가면 React 로고와 함께 Component가 있습니다. 이곳에 보면 실제 react 소스코드의 모습을 확인 할 수 있습니다. 또한 내용도 수정할 수 있게 됩니다.