DAY03 | 24.08.17 수업

 

1. forEach와 map의 차이

forEach는 새로운 배열을 return 하지 않기 때문에 Virtual Dom에서 변경 사항이 없다고 판단하고 리랜더링하지 않는다.

따라서 특정 결과값을 얻기 위해서는 map을 사용해야 한다.

 

* li로 전달해줄 때는 자식 요소를 찾을 수 있는 고유의 key 값이 필요하다.

Food 컴포넌트에 key 속성 전달!

 

1) FoodContainer.js

import React from 'react';
import Food from './Food';

const FoodContainer = () => {

  const foods = [
    {
      id : 1,
      name : "샐러드",
    },
    {
      id : 2,
      name : "치킨",
    },
    {
      id : 3,
      name : "스테이크",
    },
    {
      id : 4,
      name : "피자",
    },
  ]

  const foodList = foods.map(({id, name}) => <Food key={id} id={id} name={name} />);
  
  return (
    <div>
      {foodList}
    </div>
  );
};

export default FoodContainer;

 

2) Food.jsx

import React from 'react';

const Food = ({id, name}) => {
  
  return (
    <li>
      {name}
    </li>
  );
};

export default Food;

 

 

2. 상태관리

- 배열은 map이라는 함수가 있기 때문에 값을 변경 시키거나 뿌릴 때 리렌더링이 잘 되었지만

일반 변수는 어떻게 Virtual Dom에서 상태가 변했다는 것을 알려야할까?

=> 훅함수를 이용한다 !!

 

- 앞에 use가 붙어있는 함수는 다 훅함수라고 부른다.

 

useState 함수 사용

- react는 상태가 바뀌지 않으면 절대 화면이 바뀌지 않음

- useState를 이용해서 변수 상태 관리

- setter 메서드로만 값을 바꿀 수 있다.

 

 

Count.js

import React, { useState } from 'react';

const Count = () => {
  
  // 상태를 관리할 변수, 상태를 바꿀 수 있는 setter 메서드
  // useState(초기값);
  
  const [number, setNumber] = useState(10); // 비구조화 할당
  
  const decrease = () => {
    setNumber(number - 1);
  };
  const increase = () => {
    setNumber(number + 1)
  };
  
  return (
    <div>
      <button onClick={decrease}>-1 감소</button>
      <p>{number}</p>
      <button onClick={increase}>+1 증가</button>
    </div>
  );
};

export default Count;

button.addEventListener를 쓰지 않은 이유?

react에서 권장하지 않는 방법이기 때문

1) Dom에 직접 접근하는 것을 지양(document.querySelector와 같이 dom에 직접 접근 X)

2) Dom에 직접 접근하지 않기 때문에 addEventListener 불가

 

 

useRef 함수

 

*실습 예시

버튼을 눌렀을 때 input value가 초기화 되게 해라.

 

1) input 태그가 1개일 때

import React, { useRef, useState } from 'react';

const Color = () => {

  const [result, setResult] = useState("");

  const onResult = (e) => {
    let value = e.target.value;
    setResult(value);
  }

  const inputRef = useRef();

  const textReset = () => {
    console.log(inputRef);
    inputRef.current.value = "";
    setResult("");
  }

  return (
    // color : color;
    <div style={{color}}>
      <p>{result}</p>
      <input ref={inputRef} onChange={onResult} type="text" />

      <div>
        <button onClick={textReset}>값 초기화</button>
      </div>
    </div>
  );
};

export default Color;

 

 

2) input 태그가 2개일 때 특정 input 지정

import React, { useRef, useState } from 'react';

const Color = () => {

  const [result, setResult] = useState("");

  const onResult = (e) => {
    let value = e.target.value;
    setResult(value);
  }

  const inputRef = useRef([]);

  const textReset = () => {
    console.log(inputRef);
    inputRef[0].value = "";
    setResult("");
  }

  return (
    // color : color;
    <div style={{color}}>
      <p>{result}</p>
      // element 에는 현재 input이 들어온다.
      <input ref={(element) => inputRef[0] = element } onChange={onResult} type="text" />
      <input ref={(element) => inputRef[1] = element } type="text" />

      <div>
        <button onClick={textReset}>값 초기화</button>
      </div>
    </div>
  );
};

export default Color;