유효성검사/ re-evaluation/ re-rendering

Form 유효성 검사 : 데이터베이스에 오염되지 않은 데이터를 보관하기 위해서

const nameInputIsInvalid
= !enteredNameIsValid && enteredNameIsTouched

const nameInputClasses
= nameInputIsInvalid? “form-control invalid”: “form-control“

Const nameInputBlurHandler=(event)=>{
	console.log(“event onBlur!”);
	
	setEnteredNameIsTouched(true);

	if(enteredName.trim()===“”){
		setEnteredNameIsValid(false);
		return; 
	}
}

• 리액트의 동작 원리
• Virtual DOM Diffing

State,props

• Re-evaluation vs Re-rendering

Re-evaluation : 컴포넌트에서 state,props 등에 의해 함수가 재실행 될 때
Re-rendering : real DOM에 수정이 생기는 경우 발생

Memo
부모 컴포넌트에서 자식 컴포넌트로 props를 내려줄 때 props가 바뀌지 않으면,re-rendering 시켜주지 않는다

왜 모든 컴포넌트에 memo 적용을 안 하는가?

Memo()는 컴포넌트 함수 실행 전과 후의 snapshot을 찍어서 DOM에 저장
비교해서 변화가 있으면 React DOM 업데이트, 이 연산을 하는데 비용 발생

Props가 그대로인데 re-render 일어나는 조건
:매번 재생성 되는 새로운 함수

useCallback 같은 기능의 함수를 매번 컴포넌트, 리랜더링이 일어날 때마다 새롭게 생성할 필요 x,

같은 객체를 매번 컴포넌트 리랜더링이 일어날 때마다 새롭게 생성해줄 필요 없음

• 비동기

하나의 프로세스가 완료되기 전에 다음 프로세스를 시작하는 방식

자바스크립트 비동기 처리방식

콜백함수, Promise, async/await

http 요청과 같이 프로젝트 전체적으로 자주 쓰이는 로직들은 아웃소싱해서
커스텀 훅으로 사용하면 생산성이 올라갈 수 있다

Const [isLoading,setIsLoading]=useState(false)
Const [error,setError]=(null)

const sendRequest=async()=>{

	setIsLoading(true);
	setError(null);
	try{
		const resonse=
		await fetch(requestConfig.url, {
			method: requestConfig?.method?requestConfig.method:”GET”,
 			headers:requsetConfig?.headers?requestConfig.headers :{}
			body: requestConfig?.body ? RequestConfig.body:null
			
		})

		if(!response.ok){
			throw new Error(“Request failed!)
		}
		
		const data= await response.json();

  		applyData(data)

	}
	catch(err){
		setError(err.message||”Something went wrong”)
	}
	
	setIsLoading(false)
}