📚 Reference

• 공식 문서 1
• 공식 문서 2
• 공식 문서 3
• 참고 자료 1
• 참고 자료 2
• 참고 자료 3

📜 Chapter

‣

props

One-way Data Flow (단방향 데이터 흐름)

state

• state
• 상태
• React에서 State는 component 안에서 관리되는 것이다.
• 컴포넌트의 생명 주기 동안 수정될 수 있는 내부 데이터로 다시 렌더링해도 유지된다.
• React 컴포넌트 구성 요소 중 state는 컴포넌트의 상태를 저장하기 위한 용도이다.
• 이것은 컴포넌트가 유지해야 할 값으로서 컴포넌트 내부에서만 접근할 수 있는 속성을 가진다.
• 클래스에서 state를 사용하려면 생성자 함수에서 멤버 변수로 등록해 초기 값을 설정한다.
• 상태는 동적으로 화면의 내용을 바꿀때 중요한 역할을 한다.

constructor() {
  super() // (1)
  this.state = { searchKeyword: "" } // (2)
}

• (1): App 클래스는 React.Component 클래스를 상속했기 때문에 생성 시점에 부모의 생성자 함수를 호출해야 한다.

• (2): 그리고 나서 생성된 this에 state란 객체를 등록해 상태를 만들 수 있다. searchKeyword 라는 이름을 키로 갖는 객체를 초기 값으로 할당했는데 입력 값이 빈 문자열이라는 의미이다.

• 다음은 이 값을 input 엘리먼트에 연결할 차례이다.

• 렌더 함수에서 반환하는 React 엘리먼트 중에 input에 연결한다.