드디어 html에서 스크립트를 불러와 React를 하는 것이 아닌,,, reactapp을 직접 사용해서 작업을 하기 시작했다..
node.js도 잘모르고 처음하다보니 파일도 엄청 많고,, 어떤 연결구조로 파일들이 연결되어 있는지 많이 헷갈렸다..
index.js , App.js만을 일단 활용을 하고 나머지 파일들은 다 삭제를 해줬다.
index.js파일이다. index 파일에서는 react와 react.dom을 import해온다.
ReactDom으로 html에 root아이디를 가진 div를 만들어주고 그 디브 안에 App을 불러온다.
App을 불러오기 위해 App.js를 import하고 있는 것도 알 수 있다.
useState를 통해 값이 바뀌게 되면 함수가 항상 다시 render된다.
하지만 항상 실행시키지 않고 최초에 한번만 실행시키고 싶은 것들이 있을 수도 있는데 이 경우에 useEffect를 사용한다.
useState와 onChange함수를 통해 입력창을 하나 만들어 주었고
함수 안에 console.log('i render every time')를 추가해 주었는데 1을 10번 입력해주었더니 함수 자체를 10번 재호출해서 콘솔에 10번이 찍혔다.
이를 방지하기 위한 것이 useEffect이다.
useEffect(()=>{'실행시킬 동작', [감지할요소]});
다음으로 사용한다.
실행시킬 동작은 감지할요소에 변화가 없다면 최초 랜더링 될 때만 동작한다.
최초 랜더링 될 때 각각 한번씩 콘솔을 찍고, 1을 열 번 입력했더니 useEffect밖에 있는 콘솔은 열 번 찍고, useEffect안에 있는 콘솔은 한 번만 찍는 것을 알 수 있다.
감지할 요소를 추가해 보았다. search는 입력 창 안의 값이다. 1을 입력하면 값을 감지하고 실행시킬 동작을 실행 시킨다.
useEffect밖에 있는 콘솔이 찍히는 만큼 찍힐 것이다.
1을 다섯 번 입력해주었다.
다음과 같이 처음 렌더링 될 때 한번씩 찍고, 총 다섯 번씩 더 콘솔을 찍는다.
