최근 현업에서 자주 사용되고 있는 웹,앱의 View의 제작을 도와주는 (tool) 라이브러리이다.
대표적으로 넷플릭스(Nefilx), 왓챠(Watcha)가 있다.
Component 컴포넌트
1. 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다
2. JavaScript 함수와 유사합니다. “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다.
props 와 state는 철저하게 분리되어야 한다.
Props 자세히 살펴보기
State 좀더 자세히 살펴보기
Component는 HTML을 반환하는 함수이다.
즉, 나만의 HTML 태그(나만의 Component)를 만들 수 있다는 의미이다.
복잡한 코드를 기능별로 나누어서 정리함에 담고, 정리함에 이름표를 붙여 놓아 찾기 쉽게 정리하는 것이라고 할 수 있다.
Component의 장점은 내가 직접 Component를 만들 수도 있으며,
남이 만들어 놓은 Component를 사용할 수도 있다는 것이 장점이다.
또한 컴포넌트 태그에 속성(props)을 붙여서 같은 태그라도 내용이 다르게 나오게 할 수도 있다.
이것이 바로 재사용성을 높이기 위한 방법! 리팩토링 방법이다.react는 component를 사용해서 HTML로 작성하려는 경우에 필요하다.
상위 Component 에서 props를 하위 Component에 내려주는 예제.
👇 (부모에서 자식에게 내려주는 것만 가능하다!) 👇
this.setState의 사용법과 사용해야 하는 이유
setState를 해줘야만 Life cycle이 돌 수 있다. 라이프사이클은 렌더링과 상태의 변경에 따라서 발생시킨다.
그래서 state를 직접 변경하면 안되는 것이다.
왜? 우리는 쉬운 Function Component가 아닌 class component & React.Component를 사용하는거야?
State <- 때문이야
State가 뭔데?
Props
상위 컴포넌트가 하위 컴포넌트에게 내려주는 데이터
그래서 하위는 이 props를 사용만 할 수 있고 변경할 수 없다.
state
컴포넌트가 갖는 상태
객체의 형태로 컴포넌트에 보관하고 관리한다.
class component로 작성되어야 한다.(function component는 안됨)
값을 변경할 때는 반드시 setState 메서드를 사용해야 한다. (render()함수가 다시 호출됨)
immutable하다
state변화의 결과로 life cycle이 실행된다
Render()
어떤 화면을 그릴 것인가
Life cycle
컴포넌트가 브라우저에 보여질 때(DOM에 생성되기 전 후나 데이터가 변경되어 상태를 업데이트하기 전 후로 실행되는 메소드), 업데이트될 때, 사라질 때 각 단계 전, 후로 특정메서드가 호출된다.