0. props와 state에 대한 조사

[123000l]

props와 state는 react에서 구성 요소가 데이터를 받거나 처리하고 보내기 위해 사용된다. 렌더링(화면에 보이는) 결과물에 영향을 주는 정보를 갖고 있다.

차이점

• props : 함수 매개변수처럼 컴포넌트에 전달된다.
• state: 함수 내 선언된 변수처럼 컴포넌트 안에서 관리된다.

props

• 객체 내부 속성을 의미하는 properties이다.
• 상위(부모) 컴포넌트에서 하위(자식) 컴포넌트로 데이터를 넘길 때 사용한다.
• 한번 설정되면 변경이 불가한 불변의 데이터이다.

state

• 내부 컴포넌트에서 생성되고 활동하며 변경이 가능한 가변의 데이터이다.
• 사용과 구현을 철저하게 분리하여 각각의 편의성을 돕고자 한다.
• 일반 변수와 다른 점 : 함수가 종료될 때 사라지는 일반 변수에 반해, state 변수는 리액트에 의해 보존된다.
• 일반적으로 변수가 아닌 setState( ) 라는 리액트 함수를 사용하여 State라는 저장 공간에 담아 사용한다.
• 리액트는 객체의 상태가 바뀔 때마다 컴포넌트를 브라우저에 자동으로 재렌더링한다. 이때, Virtual DOM이 생성되는데, 리액트는 이전의 Virtual DOM과 비교하여 다른 부분을 찾는다. 메모리에서 먼저 구현한 후 실제 DOM 부분만 업데이트 한다.
• setState( )는 항상 컴포넌트를 즉시 업데이트 하지 않는다. 업데이트 일괄 처리 또는 연기가 가능하다.

Component

• 앱을 이루는 최소한의 단위로, 리액트로 만든 앱은 컴포넌트의 조합이라 할 수 있다.
• 컴포넌트 내용은 자바스크립트를 닮은 jsx라는 언어를 사용한다. jsx는 페이스북이 개발했다.
• 리액트는 jsx를 웹 브라우저에 뿌리며 자체적으로 js로 컨버팅 한다.
• 컴포넌트 사용 규칙
  • 컴포넌트의 이름은 대문자로 시작해야 한다.
  • render( )은 엄연히 함수지만, 컴포넌트 안에서는 render( ) { } 형태로 함수 명 함에 function 을 생략한다.