13. React [리액트 스파르타 입문 강의] State- part 1

State

component내부에서 바뀔 수 있는 값을 의미한다.

react에서는 let으로 값 바꾸는게 즉시 반영 불가능.

useStare()이라는 훅을 이용해서 state를 만든다. 

import React, { useState } from 'react';

function GrandFather() {
  const [name, setName] = useState("김씨할아버지"); // 이것이 state!
  return <Mother grandFatherName={name} />;
}

// .. 중략

const name="김씨할아버지"

에서

const [name, setName] = uesState("김씨할아버지"));

로 바뀜.

 

useState훅을 이용하는 방식

const [ value, setValue ] = useState( 초기값 )

const[value, setValue]=useState( 초기값입력 )

             1.      2.              3

1. State의 이름
2. Set+방금설정한 State의 이름
3. useState( 괄호 안에 내가 원하는 초기값)

 

**Hook - react에서만 제공되는 기능.

 

// src/App.js

import React, { useState } from "react";

function Child(props) {
  return (
    <div>
      <button
        onClick={() => {
        	props.setName("박씨할아버지"); 
        }}
      >
        할아버지 이름 바꾸기
      </button>
      <div>{props.grandFatherName}</div>
    </div>
  );
}

function Mother(props) {
  return (
    <Child grandFatherName={props.grandFatherName} setName={props.setName} /> // 받아서 다시 주고
  );
}

function GrandFather() {
  const [name, setName] = useState("김씨할아버지");
  return <Mother grandFatherName={name} setName={setName} />; // 주고
}

function App() {
  return <GrandFather />;
}

export default App;

 

나는 이 코드가 조금 어려워서 하나씩 뜯어봐야겠다. 

 

1. setName(바꾸고싶은 값) 을 기억하며, child 컴포넌트 내에 버튼은 

onClick={() =>{

  props.setName("박씨할아버지");

}}>

할아버지 이름 바꾸기

</button>

useState에 있던 ("김씨할아버지") 에서 button을 누르면 setName이 실행되며 ("박씨할아버지")로 바뀐다.

 

2.  props를 통해 grandFatherName 을 Mother로 전달

3. child까지 grandFatherName전달 버튼이 눌러지면 setName으로 변경됨

 

 

 

 

Children

Layout component만들 때 자주쓰임

 

전부 같은 스타일을 주고싶을 때.

Layout이라는 component툴을 만들고 그 안에 들어오는 값들은 전부 같은 스타일로

->component마다 스타일을 줄 필요 없이 layout component만 하나 작성해두고 그 안에 children으로 값을 주입하면됨

 

 

구조분해할당 

: 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게하는 표현식.

function Todo({ title }){ return <div>{title}</div> }

중괄호 안에 객체의 key name을 적어줌

구조분해할당을 사용하지 않았다면, props.title방식으로 값에 접근했겠지만, component내에서 title이라는 이름만 적어도 값에 접근이 가능.

 

Default props: 부모component에서 props를 보내주지 않아도 설정될 초기 값

Props 중에서 자주받거나 무조건 받아야하는 Props가 있다. 

 

// components/Child.js

 

import React from 'react';

 

function Child({ name }){

return <div>내 이름은 {name} 입니다. </div>

}

 

export default Child

 

부모컴포넌트에서 props를 받기 전까지 임시적으로 사용하는 props를 child컴포넌트에서 직접 설정. 

부모컴포넌트에서 name props가 오면 default props는 사라지고 내려받은 props값으로 비뀜. 

 

 

// components/Child.js

 

import React from 'react';

 

function Child({ name }){

return <div>내 이름은 {name} 입니다. </div>

}

 

// 이렇게 설정합니다.

Child.defaultProps={

name: '기본 이름'

}

 

export default Child

 

이렇게도 설정 가능

 

import React from 'react';

 

// 구조 분해 할당 문법을 사용하면 이렇게도 할 수 있어요.

function Child({ name = '기본이름' }){

return <div>내 이름은 {name} 입니다. </div>

}

 

export default Child

 

 

 

 

State

component내부에서 바뀔 수 있는 값을 의미.

react에서는 let으로 값 바꾸는게 즉시 반영 불가능.

 

useState (Hook)

const[value.setVale]=useState(초기값)

             1.      2.              3

1. State의 이름
2. Set+1.
3. useState(원하는 초기값)

 

 

 

useState+onClick Event

button과 이벤트 헨들러 구현

function App() {

  function onClickHandler() {

    console.log("hello, button");

  }

 

  return (

    <div>

      <button onClick={onClickHandler}>버튼</button>

    </div>

  );

}

 

React에서는 이러한 방식으로 함수와 컴포넌트(button 태그)를 연결시킵니다.

우리는 이 함수를 이벤트 핸들러 라고 표현합니다

 

 

state구현하고 이벤트헨들러와 연결하기

import React, { useState } from "react";

 

function App() {

  function onClickHandler() {

    setName("Nooreongs");

  }

  const [name, setName] = useState("Gildong");

  return (

    <div>

      {name}

      <button onClick={onClickHandler}>버튼</button>

    </div>

  );

}

export default App;

 

 

useState+onChange Event

 

Input과 state 구현

input과 useState를 사용해서 input의 값을 넣을 value라는 state를 생성했습니다. 이번에는 function keyword를 사용하지 않고 화살표 함수를 사용해보았어요. 화살표 함수, function 키워드 모두 똑같이 함수 컴포넌트를 만들 수 있습니다. 

 

import React, { useState } from "react";

 

const App = () => {

  const [value, setValue] = useState("");

  const onChangeHandler = (event) => {

    const inputValue = event.target.value;

    setValue(inputValue);

  };

 

  return (

    <div>

      <input type="text" />

    </div>

  );

};

 

export default App;

 

 

사용자가 입력한 Input값을 추출하기 위해 event.target.value 에 접근

추춘해온 값을 setValue , value의 state에 연결

 input과 state 연결

 

input에서는 클릭하는 행동이 아니라 바뀌는 행동

onchange함수를 연결, 그리고 value 연결

 

사용자가 input에 어떤 값을 입력하면 입력할 때 마다 (on change) value라는 state에 setValue를 해서 값을 넣어주는 것

 

 import React, { useState } from "react";

 

const App = () => {

  const [value, setValue] = useState("");

  const onChangeHandler = (event) => {

    const inputValue = event.target.value;

    setValue(inputValue);

  };

  console.log(value);

  return (

    <div>

      <input type="text" onChange={onChangeHandler} value={value} />

    </div>

  );

};

 

export default App;

 

사용자가 입력한 input의 값은 event.target.value 로 꺼내 쓸 수 있다. 

State인 value를 input의 attribute인 value에 넣어주면 input과 state이 연결된다. 

 

사용자가 input에 어떤 값을 입력하면, 그 값을 입력할 때마다 onChange될 때마다 value라는 state에 setValue해서 넣어주는 것 입니다. 

 

 

불변성

메모리에 있는 값을 변경할 수 없음

 

 

스프레드문법 (전개연산자)이용해서 기존의 값 복사+그 이후 값 추가하거나 수정

 

Component를 생성하고 보여주고자하는 UI요소를 Componen 내부에서 JSX를 통해 선언하면 리액트가 화면에 그려준

React Componentr가 선언체라는 개념은 매우 중요

 

명령형: 어떻게

프로그램에 제어흐름과 같은 방법을 제시

목표를 정리하지 않음

 

선언형: 무엇을

제어의 흐름보다는 어떤걸 하고싶은지

 

명령형- 컴퓨터가 수행하는 절차를 일일이

리액트(선언형 프로그래밍)-UI선언하고 render함수를 호출하면 알아서 절차를 수행해서 화면에 나타냄

어떻게 그릴지는 react내부에 잘 숨겨져 추상화되어있음.

 

렌더링

컴포넌트가 현재 props와 state의 상태에 기초해서 ui를 어떻게 구성할지 컴포넌트에게 요청하는 작업.

 

 

렌더링이 발생하는 경우

1. 리액트 앱 실행
2. 리액트 내부 상태 변경(컴포넌트 내부 스테이트가 변경 컴포넌트에 새로운 프롭스가 들어올 때 
3. 상위컴포넌트에서 이 두가지 이유로 렌더링이 발생)