react기초 - 노마더코더 ( 영화 웹 서비스 만들기 ) - hook

- React.useState

let a = 0;
function ab() {
}

// 같음
const [a,ab] = React.useState(0);	// 배열로 [0,f] 로 들어가있음

- state 변경 방식

const [counter, setCounter] = React.useState(0);
const onClick = () => {
	// 1.
	setCounter(counter+1);
	// 2.
	setCounter(current => current+1);

1. 직접 값 설정 : 별로 좋은 방법x , counter가 다른 곳에서 update 될 수도 있음

2. 함수를 전달하기 : current의 첫번째 argument는 현재값 / return값이 새로운 state -> 더 안전

 

- React.memo()

  Memo : 컴포넌트의 props가 변경되지않으면 랜더링시키고 싶지않을때 사용

const MemorizedBtn = React.memo(Btn);
// Btn은 컴포넌트

 

- react-create-app 에서는 React.을 사용할 필요가 없음.

 

- useEffect : 코드가 딱 한번만 실행될 수 있도록 보호 / API호출과 같은 경우 딱 한번 실행만 원할 경우

  첫번째 argument :  우리가 딱 한번만 실행하고 싶은 코드

  두번째 argument : dependencies, 해당 값 변화시 코드 실행

const iRunOnlyOnce = () => {
	console.log("i run only once.");
}
useEffect(iRunOnlyOnce,[]);

코드의 특정한 부분만이 변화했을 때,  원하는 코드들을 실행할 수 있는 방법 

useEffect(()=>{
	if(keyword !=="" && keyword.length > 5 ){
		console.log("SERCH FOR",keyword);
	}
},[keyword]); 		// keyword가 변화할 때 코드를 실행

 

- cleanup function : 컴포넌트가 사라질때의 실행 코드

function Hello() {
	useEffect(()=>{
		console.log("created:)");
		return () => console.log("destroyed :(");
}, []);

자주 사용하는 코드는 아님

 

- useParams : react-router-dom / url에서 받아오는 값을 알 수 있음

                   react router는 변수값을 넘겨줌

 

- useHistory : router의 hook

const history = useHistory();
history.push("/");