YoonStudyNote

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시키지 않고도 역동적인 사이트를 만..