React

wonkeunC·2021년 4월 29일
0

React

목록 보기
1/4
post-thumbnail

React 란?

최근 현업에서 자주 사용되고 있는 웹,앱의 View의 제작을 도와주는 (tool) 라이브러리이다.
대표적으로 넷플릭스(Nefilx), 왓챠(Watcha)가 있다.

React의 특징

  1. React는 선언형이다.
  2. React는 컴포넌트 기반으로 재사용성이 뛰어나다.
  3. React는 Virtual DOM(가상돔)기반으로 가볍다.
  4. React 컴포넌트는 stateprops 을 가진다.



Component와 props

Component 컴포넌트
1. 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다
2. JavaScript 함수와 유사합니다. “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다.



props

  • props는 속성을 나타내는 데이터이다.
  • 사용자에게 중요함 보여지는 측면이 강하다.
  • props = 핸드폰 외부 (케이스 등. )

state

  • 내부에서 동작, 사용자가 알 필요도 없고 알아서도 안되는 것. component 내부적으로 사용하는 것 들. 구현자 측면.
  • state는 화면에 보여줄 컴포넌트의 UI 정보(상태)를 지니고 있는 객체입니다.
  • 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값.
  • state는 컴포넌트 내에서 정의하고 사용하며 얼마든지 데이터(객체)가 변경될 수 있다.
  • state = 핸드폰 내부 (전선, 기능 부품 등) / component가 다양한 동작을 할 수 있게 끔 한다.

props 와 state는 철저하게 분리되어야 한다.

Props 자세히 살펴보기


State 좀더 자세히 살펴보기



Component

Component는 HTML을 반환하는 함수이다.
즉, 나만의 HTML 태그(나만의 Component)를 만들 수 있다는 의미이다.
복잡한 코드를 기능별로 나누어서 정리함에 담고, 정리함에 이름표를 붙여 놓아 찾기 쉽게 정리하는 것이라고 할 수 있다.

Component의 장점은 내가 직접 Component를 만들 수도 있으며,
남이 만들어 놓은 Component를 사용할 수도 있다는 것이 장점이다.
또한 컴포넌트 태그에 속성(props)을 붙여서 같은 태그라도 내용이 다르게 나오게 할 수도 있다.
이것이 바로 재사용성을 높이기 위한 방법! 리팩토링 방법이다.

react는 component를 사용해서 HTML로 작성하려는 경우에 필요하다.


상위 Component 에서 props를 하위 Component에 내려주는 예제.
👇 (부모에서 자식에게 내려주는 것만 가능하다!)
👇


this.setState의 사용법과 사용해야 하는 이유

this.setState

setState를 해줘야만 Life cycle이 돌 수 있다. 라이프사이클은 렌더링과 상태의 변경에 따라서 발생시킨다.
그래서 state를 직접 변경하면 안되는 것이다.


이벤트 사용, 처리 방법


bind 사용 이유


React.Component

왜? 우리는 쉬운 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에 생성되기 전 후나 데이터가 변경되어 상태를 업데이트하기 전 후로 실행되는 메소드), 업데이트될 때, 사라질 때 각 단계 전, 후로 특정메서드가 호출된다.

profile
개발자로 일어서는 일기

0개의 댓글