React Component , States , Props , Life cycle

Component

****** React 컴포넌트를 작성할 때 컴포넌트 이름은 대문자로 시작해야 합니다.

Class VS Functional

Functional

React 에서 컴포넌트를 정의하는 가장 간단한 방법은 javascript 의 함수 형식으로 정의하는 것입니다.

state 나 lifecycle 이 없는 일반 JavaScript 함수이므로 읽기 및 테스트 하기가 수월합니다.

기본적으로는 state , lifecycle 등 의 기능을 사용할 수 없습니다. ( 위 기능들을 Functional 에서 사용할 수 있도록 Hook 등장! )

 

functional Component Example

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

( props 는 함수의 인자로, Welcome 이라는 function 사용할 수 있는 데이터로 생각해 주시고 아래쪽에서 다시 다루겠습니다! )

 

---

Class

Class 컴포넌트는 아래와 같이 쓰이게 됩니다. React.Component 에 대한 상속을 작성해야합니다.

( 컴포넌트에 React.Component 의 기능에 대한 액세스 권한을 제공합니다. )

또한 Class 의 경우  render()메소드가 필수적으로 필요하며 render 후 HTML을 리턴합니다.

Constructor 는 class 에서 states 나 props 를 사용하기 위해필요한 생성자입니다.

( 메서드를 바인딩하거나 state를 바꾸는 작업이 없다면, 해당 React 컴포넌트에는 구현하지 않아도 됩니다. )

super(props) 는 부모 클래스 생성자를 가리킵니다.( 리액트에서는 React.Component ) props 를

상속받아서 class 에서도 사용할 수 있게 도와줍니다. ( constructor 에서 super 호출 전에 this 를 사용하지 못하게 되어있습니다. )

 

Class Component Example

class App extends Component {
  render() {
    return <div>hello</div>;
  }
}

 

 

 

함수형 컴포넌트와 클래스, 어떤 차이가 존재할까?

함수형 컴포넌트와 클래스, 어떤 차이가 존재할까?

Dan Abramov - 왜 super(props) 를 명시해 줘야 하는가?

Dan Abramov - 왜 super(props) 를 명시해 줘야 하는가?

 

---

States

React 에서 해당 component 에서 동적인 데이터를 관리하는 경우

state를 직접 변경하지 않을 것

state를 직접 변경하면 리액트가 이를 감지하고 다시 랜더링 하지 않으므로 setState를 이용한다.

state를 유일하게 할당 할수 있는 곳은 constructor다.

리액트가 "여러 setState() 호출"을 만나면 각 setState() 호출에 전달 된 모든 객체를 추출하여 배치 작업을

수행하고 이를 머지(merge)하여 단일 객체를 형성 한 다음 단일 객체를 사용하여 setState()를 수행합니다.

Props

props는 상위 component 에서 하위 component 로 전달되는 데이터입니다.

또한 불변한 속성을 가지고 있습니다. (동일한 입력이 주어지면 항상 동일한 출력을 렌더링합니다)

Life cycle

컴포넌트의 수명을 나타내며 페이지에 렌더링 되기 전 준비과정에서 시작해서 페이지에서 사라질 때 끝납니다.

 

이 생명주기 시점을 이용하여 우리는 다양한 이벤트를 원하는 상황에 맞게 활용할 수 있습니다.

 

리액트 교과서 - 컴포넌트와 라이프사이클 이벤트

리액트 교과서 - 컴포넌트와 라이프사이클 이벤트

(React) Component Life Cycle Methods

(React) Component Life Cycle Methods

React 16 Lifecycle Methods: How and When to Use Them

불러오는 중입니다...