React (Hooks)

김철균·2024년 1월 24일

TIL 내배캠

React

목록 보기

5/12

React Hooks - useState

가장 기본적인 hook

함수형 컴포넌트 내에서 가장 가변적인상태
ex) const [state, setState] =useState(초기값);

불필요한 랜더링을 최소한으로 줄여야한다

React Hooks - useEffect(의존성 배열)

useEffect: 랜더링될때마다, 특정한 작업을 계속 수행하도록하는 훅

UseState 와 useEffect를 같이 사용할때 useState가 변경될때마다 랜더링을 하기 때문에 useEffect가 계속해서 반복된다.
-> useEffect뒤에 인자를 넣어서 해당 인자가 값이 바뀔때만 useEffect가 실행되도록 하면 해결된다

useEffect(() => {
    console.log("hello useEffect!");
  }, []); // 배열로 인자 생성

React Hooks - useRef

DOM요소에 접근하게 하는 React Hook
1.저장공간으로서의 useRef
2.DOM요소 접근 방법으로서의 useRef
(focus할때 사용 ***)

ref로 설정된 값은 렌더링되어도 컴포넌트가 죽지않으면 지속된다.

1.저장공간으로서의 useRef

state와 비슷한 역할을 하지만 state와 다르게 변화가 일어나도 렌더링을 발생시키지 않음
렌더링되어도 저장값유지

focus연습

const App = () => {
  const idRef = useRef("");

  //화면이 렌더링 될 때, 어떤 작업을 하고 싶다(useEffect)
  useEffect(() => {
    idRef.current.focus();
  }, []);

  return (
    <>
      <div>
        아이디 : <input type="text" ref={idRef} />
      </div>
      <div>
        비밀번호 : <input type="password" />
      </div>
    </>
  );
};

export default App;

1.useEffect()는 렌더링될때 사용되기때문에 새로고침을 할 시, id의 input에 focus가 되도록 해야해서 사용
2.useRef를 idRef로 설정(초깃값 "")
3.input태그에 ref를 설정해놓은 idRef로 연결을 함
4.useEffect에 연결해둔 idRef.current.focut()를해서 렌더링될때마다 포커스가 가도록함.