[React]

component

React가 레고라면 Component는 블록
리액트로 만든 한 프로젝트는 레고 블록의 모음
전문가용 => 독립적인 기능을 수행할 수 있는, 재사용이 가능한 최소 단위

함수형 컴포넌트

function IAmComponent(props) {
  // 인자로 props
	return (<p>I am component! :) Functional component!</p>);
  // return으로 리액트 엘리먼트 반환
  // 무조건 하나의 엘리먼트 또는 null 반환해야함
}

Ex)

//MyComponents.js
const One = (props) => {
  return (
    <div>
      <h1>One</h1>
    </div>
  )
}
const Two = () => {
  return (
    <div>
      <h1>Two</h1>
    </div>
  )
}

export default One;
export {Two};
// 만든 컴포넌트를 import해야 화면에 띄울 수 있음

//App.js
import One, { Two } from './MyComponents';
// One component import 

function App() {
  return (
    <div className="App">
      <One/> // <= One components 넣어줌       
    	<Two/>
    </div>
  );
}

export default App;

import 할때 그냥 문자열과 {}의 차이는 default의 유무

import { One } from 'bar' - export {One} / export {}없어도 됨??
=> import {OneOne}~ 노 가능 -> 오류남 이름 export로 해준 애들은 이름 함부로 못 바꿈
=> 바꾸고 싶으면 { Two as TwoTwo} 가능 'as~' 별칭 지정

import One from 'bar' - export default One.
=> One 이름 바꿔서 import OneOne from~ 가능

한페이지에서 두개의 컴포넌트를 동시에 export default로 못함
한 모듈 안에 여러 가지를 export하는 경우에는 export를,
한 모듈 안에 export 대상이 하나면 export default를 사용한다.

컴포넌트의 상태관리

상태관리 = 데이터 관리
컴포넌트는 두가지 데이터를 갖는다 props & state

props = 부모한테 받아온 데이터
state = 컴포넌트가 가지고 있는 데이터

둘다 렌더링 결과물에 영향을 주는 데이터를 가지고 있기 때문에 직접 수정하면 절대 절대 안된다
직접수정? => 직접 새로운 값을 할당하지 말아라
ex) a라는 props가 있으면 a=1 이라고 직접 컴포넌트내에서 주면 안됨

컴포넌트는 state,props 변할때 부모가 재렌더링 할때, 강제 업데이트 될때 컴포넌트가 업데이트=재렌더링되는데 state, props에 들어있는 값을 임의로 변경하면 컴포넌트는 재렌더링 안된다 = 화면에 업데이트못함

Hook

함수형 컴포넌트에서 상태 값을 관리 하거나 그밖의 여러 리액트 기능을 하기위해 사용
훅 = 자바스크리브 함수

• 오직 함수형 컴포넌트에서만 사용가능
• 최상위에서만 호출할 수 있다
  -> 반복문 , for문, if문 안에서는 사용못한다 왜냐하면 컴포넌트가 렌더링 될때 훅의 실행 순서를 늘 보장 할 수 없기 때문에

useState

상태관리=데이터 관리를 위한 훅
state를 수정하고 싶으면 나 지금 state 바꾼다 그니까 이 값으로 바꿔줘라는 요청의 의미인 setState(클래스형컴포넌트), useState(함수형컴포넌트)사용

// MyComponent.js
import React from "react";

const One = () => {
  
  // useState 규칙
  // => const[] = React.useState();

  const [name, setName] = React.useState("mean0");
  // 1.값으로 바꿔달라는 요청의 state 만듬 =>  useState 사용
  // const [name(상대값),setName(네임을 바꿀 수 있는값?] = React.useState("기본값")

  return (
    <div>
      <h1>One</h1>
      <p>{name}</p>
      <button onClick ={() => {
        setName("perl");
      }}>change!</button>
    </div>
  )
}

const Two = () => {
  return (
    <div>
      <h1>Two</h1>
    </div>
  )
}

export default One;
export {Two};