로니의 개발 이야기

state를 설명하기에 앞서, 생성자에 대해서 알아보겠습니다. 생성자 (contructor)? 생성자는 클래스의 인스턴스가 생성되면 가장 먼저 실행되는 메서드입니다. '생성자'라는 이름에 걸맞게 클래스의 다른 어떤 메서드보다 먼저 실행되며, 주로 인스턴스의 초기 설정에 대한 로직을 생성자에 작성합니다. super(props)는 항상 최상단에 위치해야 한다. super는 React에서 React.Component를 가리킵니다. 중요한 것은 super(props) 선언 후에 constructor에서 this 키워드를 사용해야 한다는 것입니다. import React, { Component } from 'react'; class App extends Component{ constructor(props){ su..

1. state 사용 - 2 아래와 같은 코드가 있을때, 여기서 를 주목해보자. 이 코드가 나타내는 바는 미리 만들어 놓은 TOC 컴포넌트를 반환해주게 된다. 이 부분은 web 상에서 봤을 때, 글 목록을 보여주게 된다. 그렇다면 여기서 TOC 안에 있는 데이터로 App의 내부 state를 TOC에 주입해주는 것을 통해서 자동으로 데이터를 바꿔주고 싶다면 어떻게 하면될까? 쉽게 말해서 새로운 글 목록이 추가될 때마다, TOC를 열어서 수정하지 않고 바로 수정하는 것이다. 이를 위한 첫번째 단계로 contents라는 state를 만들어주었다. 데이터가 여러개이기 때문에 [] (대괄호)를 통해서 배열을 만들었다. 그리고 3가지 객체의 배열을 만들었다. 각각 id 값, title 값, desc 값을 갖는다. ..

1. props 초기화 어떤 Component가 실행될 때, render보다 먼저 실행이 되면서 그 Component를 초기화 시켜주고 싶은 코드는 constructor안에다가 코드를 작성한다. 2. state 사용 state를 초기화 하는 과정이다. 예를 들어, return에 담겨져 있는 내용들을 state화 시키는 과정을 진행해보면, 먼저, Head를 state화 하는 것이기 때문에 다음과 같이 title, sub값을 지정하고, head state를 만들었다. 이제 이 state를 적용시켜서 반환하는 작업을 진행하면 된다. {} (중괄호) 안에 다음과 같이 호출을 해주면 정상적으로 작동되는 것을 볼 수 있을 것이다.

1. React의 props와 state의 차이 props는 사용자가 component를 사용하는 입장에서 중요한 것 state는 props의 값에 따라, 내부에 구현하기 위해 필요한 데이터 Props와 Component는 철저하게 분리되어 있어야 한다. 양쪽의 편의성을 각자 도모하여 개발을 진행하여야 한다.