언제 코드가 실행될지 결정하는 방법
React JS의 작동방법 = "state를 변화시킬 때 컴포넌트(모든 코드)를 재실행시킨다"
1. "맨 처음 한번만 실행하고, 다시는 실행시키지 않는다"
useEffects( 실행시킬 코드 , [dependency] );
① < input >을 만들고 → 이 < input >에 value를 줘서 state( {keyword} )와 연결
② onChange( ≒ eventListener )를 연결 → {onChange} 함수가 작동할 때, 인자로 event를 받음
③ event를 발생시킨 < input >으로부터 value를 받아서 (event.target.value)
④ 그 value를 state( =keyword )에 넣어줌
⑤ 그 keyword( =state )를 가져와서 < input >의 value로 사용하면,
→ 우리가 원할 때, 이 < input >을 조작할 수 있다!
타이핑 할 때마다 state( =keyword)를 modify하게 된다.
console.log("i run all the time");
2. keyword가 변할 때'만' marvel 영화를 검색하고 싶어
counter가 변할 때도 marvel 영화를 검색하고 싶지는 않아!
+) if문을 사용해, "keyword 길이가 5보다 길 때 검색을 하겠다"
3. dependency
[ ] // NO dependency = 지켜볼 대상이 없다 (코드를 맨처음 한번만 실행)
[keyword] // 한 개의 아이템만 지켜보기 (keyword가 변할 때만 코드를 실행시킴)
[keyword, counter] // 둘 중 하나가 실행될 때, 코드를 실행하기
