1
const ref = useRef(value)
2

3
// ref 오브젝트는 { currnt: value } <- 이런 식으로 생성됨
4
// useRef의 인자로 넣어준 value는 ref안에 current에 저장됨
5
// ref 오브젝트는 수정이 가능하기 때문에, 언제든 원하는 값으루 수정할 수 있음

1
import React, { useState, useRef } from 'react'
2

3
function App() {
4
  // React에서 state가 변경되는 것 = 컴포넌트가 리렌더링
5
  const [count, setCount] = useState(0)
6

7
  // Ref는 아무리 수정해도, 컴포넌트를 다시 렌더링하지 않음
8
  const countRef = useRef(0) // countRef.current로 접근
9

10
  console.log('렌더링')
11

12
  const increaseCountState = () => {
13
    setCount(count + 1)
14
  }
15

16
  const increaseCountRef = () => {
17
    countRef.current = countRef.current + 1
18
    console.log('Ref :', countRef.current)
19
  }
20

21
  return (
22
    <div>
23
      <p>State : {count}</p>
24
      <p>Ref : {countRef.current}</p>
25
      <button onClick={increaseCountState}>State 올려</button>
26
      <button onClick={increaseCountRef}>Ref 올려</button>
27
    </div>
28
  )
29
}
30

31
export default App

1
import React, { useState, useRef } from 'react'
2

3
function App() {
4
  // 컴포넌트가 렌더링 된다는 것 = 컴포넌트를 나타내는 함수가 다시 불린다는 것
5
  // 함수가 불릴 떄마다 함수 내부의 변수들은 초기화됨
6
  // 그렇지만 Ref는 아무리 렌더링되도 값을 유지함
7
  const [renderer, setRenderer] = useState(0)
8
  const countRef = useRef(0)
9
  let countVar = 0
10

11
  const doRendering = () => {
12
    setRenderer(renderer + 1)
13
  }
14

15
  const increaseRef = () => {
16
    countRef.current = countRef.current + 1
17
    console.log('ref: ', countRef.current)
18
  }
19

20
  const increaseVar = () => {
21
    countVar = countVar + 1
22
    console.log('var: ', countVar)
23
  }
24

25
  const printResults = () => {
26
    console.log(`ref : ${countRef.current}, var: ${countVar}`)
27
  }
28

29
  return (
30
    <div>
31
      <p>Ref : {countRef.current}</p>
32
      <p>Var : {countVar}</p>
33
      <button onClick={doRendering}>렌더!</button>
34
      <button onClick={increaseRef}>Ref 올려</button>
35
      <button onClick={increaseVar}>Var 올려</button>
36
      <button onClick={printResults}>Ref, Var 값 출력</button>
37
    </div>
38
  )
39
}
40

41
export default App

1
import React, { useState, useRef, useEffect } from 'react'
2

3
function App() {
4
  const [count, setCount] = useState(1)
5
  const renderCount = useRef(1)
6

7
  // 무한 루프에 빠짐, State끼리 서로 렌더링되어서
8
  // const [renderCount, setRenderCount] = useState(1);
9
  // useEffect(() => {
10
  //   console.log('렌더링');
11
  //   setRenderCount(renderCount + 1);
12
  // });
13

14
  // Ref는 리렌더링을 발생시키지 않으니까, 무한루프에 안빠짐
15
  useEffect(() => {
16
    renderCount.current = renderCount.current + 1
17
    console.log('렌더링 수 :', renderCount.current)
18
  })
19

20
  return (
21
    <div>
22
      <p>countVar : {count}</p>
23
      <button onClick={() => setCount(count + 1)}>올려!</button>
24
    </div>
25
  )
26
}
27

28
export default App

1
import React, { useEffect, useRef } from 'react'
2

3
function App() {
4
  const inputRef = useRef()
5

6
  useEffect(() => {
7
    // console.log(inputRef);
8
    inputRef.current.focus() // 렌더링되면 자동으로 focus됨
9
  }, [])
10

11
  const login = () => {
12
    alert(`환영합니다 ${inputRef.current.value}`)
13
    inputRef.current.focus()
14
  }
15

16
  return (
17
    <div>
18
      <input ref={inputRef} type="text" placeholder="username" />
19
      <button onClick={login}>로그인</button>
20
    </div>
21
  )
22
}
23

24
export default App