YoonStudyNote

이번에는 어플리케이션을 역동적으로 만들 수 있는 이벤트를 살펴볼 겁니다. 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를 사용했다는것을 알 수 있을까요? 아닙니다. 전혀 ..