YoungGyu Blog

2022-04-08 TIL

April 08, 2022

Fact

  • 로그인 테스트 리펙토링
  • 퀴즈 검색 테스트 리펙토링
  • 에러 바운더리 처리

Feelings

  • react-query 정말 좋다..

Findings

  • jQuery는 상태(상태 변화)와 DOM이 묶여 있는 구조 (상태와 렌더링이 무관함)
  • React는 상태와 render(DOM)이 분리된 구조 (상태가 있고 상태를 기반으로만 렌더링)

  • 변경을 하면 (예를들어 글 쓰기)

    • jQuery는
let posts = []

const writePost = post => {
  posts.push(post)

  $('.posts').append(`
        <div>${post.title}</div>
    `)
  // document 에 대한 사이드 이펙트가 있음
}

const writeImagePost = posts => {
  posts.push(post)

  $('.posts').append(`
        <div>${post.title}</div>
    `)
}
  • React는
const Posts = () => {
  const [posts, setPosts] = useState([])

  const writePost = post => {
    setPosts([...posts, post])
  }

  const writeImagePost = post => {
    setPosts([...posts, post])
  }

  return (
    <div>
      {posts.map(x => (
        <div>{x.title}</div>
      ))}
    </div>
  )
}

  • one way binding 이라서 원론적으로는 안되는데 (부모에서 -> 자식으로만 값이 내려갈 수 있음)

    값이 아니라 이벤트 방식으로 콜백(onChange) 함수를 전달하는 방식으로 해결 해야 한다.

    상태 관리를 사용한다

    ref 를 사용한다.

const Input = React.forwardRef((props, ref) => {
  return <input onChange={e => (ref.current = e.target.value)} />
})
const Form = () => {
  const nameRef = useRef('')

  console.log(nameRef.current)

  return <Input ref={nameRef} />
}

Future Action

  • 배포하기
  • 단위 테스트 시도해보기
  • 꾸준히 TIL 적기
Lee YoungGyu