기초부터 다시 해보기 - react.js (1) function 과 useState 사용법

Current issue:

Weak understanding from Props and components.

 

Advisory:

Stick to the document.

import React, { useState } from 'react';
import data from './data';
import List from './List';

function App() {
  const [people, setPeople] = useState(data);
  return (
    <main>
      <section className="container">
        <h3>{people.length} birthdays today</h3>
        <List people={people} />
        <button onClick={()=> setPeople([])}
        >clear all</button>
      </section>
    </main>
  );
}

export default App;

Document :

• 5. State and Lifecycle

사실 매우 낮익은 장면이다. 이 부분을 간과하면 안되는게, 이게 아주 기본이기 때문.

 

const [people, setPeople] 이라 되어 있는데, 이건 그냥 해당 const (variable)변수 로써 선언(claim) 한 셈.

const [people, setPeople] = useState(data);

 

이 useState(data); 가 의미하는 것은 다음과 같다.

- useState => 기존의 state 내용을 변경하고자 함.

- useState(data) data 파일에 있는 내용을 (아래의 return 이후 적힐 내용과 같이) 변경 하고자 함.

- 주의: update 개념으로 접근해야 하는 항목.

 

return 아래에 포함된 것은 다음을 의미.

1. <section className="container"> 

- 그냥 container 로서 시작하는 className 함수(?). 그룹명에 가까운 form 개념. 주로 CSS 효과를 위한 목적이 큼.

 

2. <h3>{people.length} birthdays today</h3>

- 아무 연관 없는, 그냥 html 형식. 실제 출력도 html 처럼 되어버리고 말아버림.

 

3. <List people={people} />

- JS/react.js에서 대문자 사용하는 목적. 구분이 핵심인데, 이미 알다시피 이는 다른 import 된 List.js 파일의 내용을 여기에 적용한다는 것을 의미. 

3.1 <List people={people} />

people 는 props, {people} 는 state.

 

IMPORTANT:

export default App; does not represent as a must have item. It only exists when it is necessary to export and display (seed) it on another file.

 

Stick to the document. Highly recommended.

reactjs.org/docs/state-and-lifecycle.html

State and Lifecycle – React