React- useState, isSpecial

isSpecial

: isSpecial이 true이면 ? 뒤에 값이, isSpecial이 false이면 : 뒤에 값이 나오게 된다.

function Hello({ name, color, isSpecial }) {
  return (
    <div style={{ color }}>
      {isSpecial ? <b>*</b> : null}
      Hello~ {name}
    </div>
  );
}

다음 코드를 null 을 대신해서

function Hello({ name, color, isSpecial }) {
  return (
    <div style={{ color }}>
      {isSpecial && <b> * </b>}
      Hello~ {name}
    </div>
  );
}

이렇게도 바꿔서 작성할 수 있음.
이때 isSpecial을 true, false로 따로 지정해주지 않으면 기본값으로 true로 지정된다.

useState

:React에서 상태 관리를 위해 사용하는 훅(Hook)이다. 함수형 컴포넌트에서 상태를 관리할 수 있게 해주며 useState를 사용하면 상태 변수와 그 변수를 갱신하는 함수를 선언할 수 있다.

useState 를 작성하기 전, 모듈을 import 해줘야한다.

• import React, {useState} from 'react'; 다음 코드를 사용해 불러와줄 수 있다.

첫 번째 요소는 현재 상태 값, 두 번째 요소는 상태를 갱신하는 함수이다.

변수값 더하기, 빼기

const [number,setNumber]=useState(0);

    const onCrease = () => {
        setNumber(prenumber => prenumber+1);
        console.log('+1')
    }
    const deCrease = () => {
        setNumber(prenumber => prenumber-1);
        console.log('-1')

다음과 같이 useState(0)을 사용해 초기 인자값을 0으로 선언한 후 사용가능.

input의 상태 관리

const [text, setText] = useState('');

  const onChange = e => {
    setText(e.target.value);
  };
  const onReset = () => {
    setText('');
  };

text, setText를 아무것도 담기지 않은 공백으로 초기 상태를 지정한 후 useState를 적용.
e는 이벤트 객체(event object)이다.
e.target은 이벤트가 발생한 DOM 요소, e.target.value는 그 요소의 현재 값

useRef

: 직접 DOM 요소에 접근, 컴포넌트가 다시 렌더링될 때도 값이 유지되며, 상태를 바꾸지 않으면서 값을 저장할 때 사용
import React, { useState, useRef } from 'react';
다음 모듈을 첫줄에 import해준 후 작성해야함.

const nameInput = useRef();

map

  <div>
    {users.map(user => (
      <User user={user} key={user.id} />
    ))}
  </div>;