[TIL] 프론트엔드 term 정리-2

Type vs Interface

• Type는 같은 이름으로 여러개의 타입 생성이 불가능하다.
• 반대로, Interface는 같은 이름으로 생성이 가능하다.

Interface 선언/병합

interface Cat {  
    name: string  
}

interface Cat {  
    age: number  
}

const myCat: Cat = {name: 'Evie', age: 4} // name, age 두 정보 다 가지고 있음

제어 vs 비제어 컴포넌트(Form)

제어 컴포넌트 :

• onChange등 이벤트를 받을 때 꾸준히 업데이트되며 state에 바로 저장한다. 그로 인해 굉장히 많은 setState가 저장됨.
• 이벤트가 발생될 때마다 state의 변화로 인해 계속 리렌더링이 일어남
• 빠른 동기화를 원할 때 사용.
• <input> 내부 텍스트 검증을 할 때 유용함.
• 예시) JSX input & onChange{}, react-form, redux-form, formik

비제어 컴포넌트 :

• 이벤트를 받는 즉시가 아닌 필요할 때 state에 저장한다.
• ref 방식을 사용.
• 원하는 이벤트(i.e. Submit)를 부여하기 전까지 리렌더링이 일어나지 않음.
• 큰 텍스트를 요구하는 <input>컴포넌트에 유용하게 사용됨.
• 예시) react-hook-form

자주 사용되는 폼 라이브러리, 검증 라이브러리

• 폼 : react-form, redux-form, formik, react-hook-form
• 검증 : yup