미라클 메모리

목차

UseState - Case

onCreate 함수는 Create 함수로부터 전달된 값들을 매개변수로 받아온다. 매개변수로 받아온 값을 통해서 App 컴포넌트에서 List로 만들어진 데이터를 보낼 수 있다.

	const [dataId, setDataId] = useState(0)
  const onCreate = (author, content, emotion) => {
    const created_date = new Date().getTime();
    const newItem = {
			...
      id: dataId,
    };
		setDataId(dataId + 1) 
    setDate([newItem, ...data]);
  };

useRef - Case

const dataId = useRef(0);

  const onCreate = (author, content, emotion) => {
    const created_date = new Date().getTime();
    const newItem = {
			...
      id: dataId.current,
    };
    dataId.current += 1;
    setDate([newItem, ...data]);
  };

이때 아이디 값을 설정해주는데 있어서 의문점이 생겼다. 해당 예시는 useRef를 통해서 id값을 정해주었다. 그에 따라서 onCreate함수가 동작하면 useRef에 +1이 되어짐으로써 생성되는 게시글에는 id값이 1씩 증가한다

하지만 useState를 통해서도 동적으로 id값에 +1을 해줄 수 있다. 무슨 차이가 있는지 잘은 모르겠으나, useRef가 어떻게 쓰이는지 알아보자.

How to use useRef

인라인 ref 속성과 쓰일 경우

useRef의 current 속성 사용 예시를 보자. useRef 속성을 사용한 다음 노드에 ref 속성값에 넣어주게 되면 authorInput.curren 라는 속성을 통해서 해당 input값에 접근이 가능하다.

const authorInput= useRef();

...

<input
	ref={authorInput}
	name="author"
	value={state.author}
	onChange={handleChangeState}
/>

• authorInput 콘솔로그로 찍어서 확인해보기

authorInput.current.focus();

focus 라는 메서드를 사용하면 어떤 조건에 의해서 마우스 커서의 포인트를 잃을 때 포커스를 유지할 수 있게 도와준다. 실전 예제로는 아래와 같이 사용되었다.

if (state.author.length < 1) {
      alert("한 글자라도 입력해주세요")
      authorInput.current.focus();
      return;
    }