today i learned 1/9

배운 것, 공부한 것, 메모할 것

1. 알고리즘

  - 2164번 카드2

  - 알고리즘 너무 오랜만이라 일단 쉬운문제부터 다시시작.. 1일1문제 실천하자

2. React

  - useMemo, useCallback 등 사용하여 React 어플리케이션 최적화하기

  - React Forms

 

1. React return문

- React에게 해당 컴포넌트의 출력이 어떠해야 하는지를 알려줌

- props, state, context로 작업하는데 props와 context는 모두 결국 state의 변경으로 귀결된다. 그리고 컴포넌트에서 state를 변경할 때마다 이 state와 관련된 컴포넌트들은 전부 재평가된다(관련 함수 전부 재실행).

  - 이 과정에서 출력값이 변경이 될 수도 있는데, 이러한 변경 사항 등 차이점을 React DOM에 전달한다. 그 이후 React DOM은 이러한 변경 사항을 실제 브라우저의 DOM에 적용한다.

- React가 컴포넌트를 재평가할 때 재평가 뿐만 아니라 전체 기능을 전부 다 다시 실행하고 출력을 rebuild한다. 그런데 특정 컴포넌트의 경우는 재시작이 전혀 필요 없다(ex. 버튼 컴포넌트 등은 상태가 바뀔 일이 없고 버튼 클릭만 담당하므로 재시작 필요 X). 이 경우 export default React.memo(컴포넌트이름) 처리를 해서 "props가 실제로 변경된 경우에만, 즉 진짜로 새 값을 얻은 경우에만 이 컴포넌트 함수를 다시 실행하고 새 값이 없다면 이 함수를 실행하지 말라"고 말할 수 있다.

- 그런데, 예를 들어 함수 내에 또 다른 함수를 만들고 이 함수를 props를 통해 컴포넌트에 전달한다면, 실제로 새로운 함수 객체를 얻게 되며 이 경우 React.memo 처리는 소용이 없어진다.

  - 객체는 참조값이고 React.memo가 내부적으로 수행하는 이전 값과의 비교가 원시값에 대해서는 작동하지 않기 때문

- 이러한 상황에서 useCallback을 사용한다.

  - useCallback을 사용하면 의존성 배열 내의 값이 변경되지 않는 한 다른 주변 함수가 재실행되더라도 아무 영향을 주지 않는다. -> 불필요한 재생성을 방지하므로 최적화에 좀 더 가까워진다.

 

- useEffect 내부에서 setState로 상태를 업데이트할 때, setState()의 내부에 다른 state를 넣고 의존성 배열에 해당 값을 넣어준다면, useEffect 실행 시 의존성 배열을 무시할 수 없기 때문에 상태 변화를 놓칠 수가 없다.

const [isFormValid, setIsFormValid] = useState(false)
const [isEmailValid, setIsEmailValid] = useState(false)
const [isPasswordValid, setIsPasswordValid] = useState(false)

useEffect(() => {
  setIsFormValid(isEmailValid && isPasswordValid)
}, [isEmailValid, isPasswordValid])

이 코드를 예시로 들면, 이메일과 비밀번호의 값이 바뀔때마다 useEffect에서 유효성을 검증한 뒤 둘 다 true가 될 경우에만 setIsFormValid 또한 true가 된다. 이렇게 의존성 배열에 다른 조건 상태들을 넣는 방식으로 한다면 상태 변화를 더 정확하게 감지할 수 있다.

 

2. React Forms

유효성 검증 방법