YoonStudyNote

다음은 링크를 클릭했을 경우, 이벤트처리가 되어서 밑에 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가 변하면 화면이 다시 그려지..