리액트(계속 추가중..)

chanyeong yu ·2025년 2월 15일

리액트

웹프로그래밍

목록 보기

1/12

이벤트 처리

1.미리 함수를 만들어서 처리하기

2.OnClick 안에 만들어서 사용하기.

매개변수를 전달하기 편리함.


function showAge(age){
  console.log(age);
}

<button 
	onClick = { () => {
      console.log(30);  
    }}
>

즉 이런식으로 작성하면 age만 변경해도 값이 변경되어 출력됨.

3.e.target.value

input창을 하나 만들게 되었을때는 이런식으로.

useState

변수의 상태를 저장하고 사용하게 해주는 것.
use

useEffect

어떤 동작을 하게되면 랜더링 된다.

useEffect(() => {
	console.log("Count change");
    }, [count]);

이런 형태에서는, count가 변경되는 경우, 즉 의존성 배열만 변경되는 경우 실행된다.
즉 조건을 주고 조건이 실행되면 실행되는 것이다.

이는 api 호출할때 사용한다.
렌더링이 되고 최초 한번만 실행시키려면, 빈배열을 입력한다.

console.log("Count change");
    }, []);

랜더링 직후 한번만 실행된다.

useEffect(() => {
  fetch('http://localhost:3001/days)
        .then(res => {
    return res.json()
  })
   .then(date => {
    setDays(data);
  });
}, []);

useRef

ref오브젝트를 반환해준다.

컴포넌트가 계속해서 렌더링 되어도 언마운트 되기 전까지는 값을 유지할 수 있다는 뜻이다.

저장공간으로 사용

state의 변화 -> 렌더링 -> 컴포넌트 내부 변수들이 초기화
Ref의 변화 -> No 렌더링 -> 변수들의 값 유지
State의 변화 -> 렌더링 -> 그래도 Ref의 값은 유지

DOM 요소에 접근
자동으로 포커스를 맞게끔 해줄 수 있다는것
ex) 로그인 화면에서 아이디 치는 인풋창에 포커스 잡아서 바로 키보드 입력이 가능하게끔한다.

즉 다시 렌더링 하지 않기에 화면이 업데이트 되지 않는다.
이때 useState 를 호출하거나 하면 이때 모든 ref의 변경값이 렌더링 된다.

const App = () => {
  
const [count, setCount] = useState(0);

  const countRef = useRef(0);
  console.log(countRef);

  const increaseCountState = () => {
  
    setCount(count + 1);
  };

  const increaseCountRef = () => {
  
    countRef.current += 1;
  };

  
  return (
    <div>
      <Header />
        <div>
          <p>
          State: : {count}</p>
          <p>Ref : {countRef.current}</p>
          <button onClick ={increaseCountState}>
            업데이트
          </button>
          <button onClick ={increaseCountRef}>
            업데이트
          </button>
        </div>
      
   );
};

export default App;

즉 이 사진처럼 State 업데이트를 하면 렌더링이 되지만,
Ref를 누르면 렌더링이 되지 않는다.
다만 Ref의 current 값은 State를 업데이트 할때 한번에 렌더링이 된다.

계속 렌더링을 하면 성능이 저하되겠지만 이를 활용하면 성능향상을 줄 수 있다.

근데 그러면 변수를 사용해서 저장하면 되는거 아닌가?

아니다. 렌더링되면 변수는 다시 0으로 초기화 될것이다.
이에 반해 Ref의 값은 렌더링이 되어도 저장이 된다.

그냥 변수와 Ref의 사용 비교

const [ renderer, setRenderer] = useState(0);
  const countRef = useRef(0);
//Ref의 갑은 렌더링해도 값이 유지가 된다.
  let countVar = 0; 
//이 값은 렌더링 하면 0으로 다시 초기화된다.

  const increaseRef =() =>{
    countRef.current = countRef.current + 1;
    console.log("ref : ", countRef.current);
  };

  const increaseVar = () => {
    countVar = countVar + 1;
    console.log('var:', countVar);
  }
  
  const doRendering = () =>{ //단순 렌더링을 위한 함수 
    setRenderer(renderer + 1);
  }

  
  return (
    <div>
      <Header />
        <div>
          <p>Ref : {countRef.current}</p>
          <p>Var : {countVar}</p>
          <button onClick ={increaseRef}>
            Ref 올려
          </button>
          <button onClick ={increaseVar}>
            Var 올려
          </button>
          <button onClick ={doRendering}>
            렌더
          </button>
        </div>

렌더링 수를 셀때 무한루프 막기

만약 무언가 state를 변경시키기 위해 useEffect를 사용한다면, 렌더링할때마다 useEffect는 실행되고 그 안에 만약 state를 변경시키는 코드가 들어있다면 무한루프에 걸리고 말 것이다.
(useState -> useEffect 호출 -> 그 안의 useState 호출 -> 다시 렌더링 되므로 useEffect 호출...)

그렇기에 이때로 Ref를 사용하면 편리하다.

 const [count, setCount] = useState(1);
  const renderCount = useRef(1);

  useEffect(() => {
    renderCount.current += 1;
    console.log("렌더링 수 : ", renderCount.current);
  });

  return (
    <div>
      <Header />
      <p>
        Count : {count}</p>
        <button onClick = {() => setCount(count + 1)}>dd</button>

DOM 요소 접근

웹을 새로고침했을때 가장 처음 input 값에 포커스를 맞도록 할 수 있게 된다.

const inputRef = useRef();

  useEffect(() => {
    //console.log(inputRef);
    inputRef.current.focus(); //포커스를 잡아줍니다. 
  }, []);
  
  const login = () => {
    alert(`환영합니다 ${inputRef.current.value}!`);
    inputRef.current.focus();
  };

  return (
    <div>
      <Header />
      <input ref = {inputRef} type = "text" placeholder = "username" />
      <button onClick={login}>로그인</button>