강의 링크 : https://www.youtube.com/watch?v=8qIsZsjdvjo&list=PL93mKxaRDidEfLM0I_FFb-98vfAQgXT82&index=7 https://www.youtube.com/watch?v=lgMtc0SyW64&list=PL93mKxaRDidEfLM0I_FFb-98vfAQgXT82&index=8 https://www.youtube.com/watch?v=fZYIzTuAcNk&list=PL93mKxaRDidEfLM0I_FFb-98vfAQgXT82&index=9 해당 게시글은 위 링크의 강의를 보고 해당 내용을 정리한 게시글입니다! import에 대해 Sub.js export default Sub; 는 이 Sub 함수를 외부에 노출하겠다는 것이다. 그럼 이 외부에..
강의 링크 : https://www.youtube.com/watch?v=swGjcOWZ3d0&list=PL93mKxaRDidEfLM0I_FFb-98vfAQgXT82&index=6 해당 게시글은 위 링크의 강의를 보고 해당 내용을 정리한 게시글입니다! useState *참고 더하기 버튼에 함수를 이렇게 바인딩만 시켜야 한다. 더하기 이렇게 작성해버리면 함수가 바로 실행된다. App.js 실행결과 ) 더하기 버튼을 누르면 number의 값이 올라가지만 화면에 나타나진 않는다. 현재 number가 '상태'가 아니기 때문에 UI가 자동으로 변경되지 않는 것이다. ※ 렌더링 시점은 상태값 변경이 일어날 때이다. 따라서 let number = 1; 을 수정해서 number를 상태로 변경해주자 이렇게 작성하면 변수를..
강의 링크 : https://www.youtube.com/watch?v=U7zNZrLhhlA&list=PL93mKxaRDidEfLM0I_FFb-98vfAQgXT82&index=4 https://www.youtube.com/watch?v=IQovah5bz3Q&list=PL93mKxaRDidEfLM0I_FFb-98vfAQgXT82&index=5 해당 게시글은 위 링크의 강의를 보고 해당 내용을 정리한 게시글입니다! 지금까지 배운 내용을 토대로라면 밑줄 친 부분만 변경하고자 했을 때, 결국 이 return이 다시 실행되기 때문에 이 리턴되는 영역 자체가 다시 실행된다(그려진다)는 것이다. 함수가 하나로 묶여 있기 때문에 다른 부분만을 따로 렌더링 할 수 없다는 것이다. 이 도토리만 사과로 바꾸기 위해선 어떻게..
강의 링크 : https://www.youtube.com/watch?v=qCADzDFiVgo&list=PL93mKxaRDidEfLM0I_FFb-98vfAQgXT82&index=2 https://www.youtube.com/watch?v=OYH_ISVjHR4&list=PL93mKxaRDidEfLM0I_FFb-98vfAQgXT82&index=3 해당 게시글은 위 링크의 강의를 보고 해당 내용을 정리한 게시글입니다! React 실행 흐름 package.json : 프로젝트를 관리하는 설정 파일 npm start 를 하면 index.js를 실행시킨다. render는 데이터를 기반으로 그림을 그리는 것이다. 여기서 을 클릭해보면 App.js로 이동된다. 즉 App.js를 그리겠다는 것이다. 이와 같은 문법을 JS..
강의 링크 : https://www.youtube.com/watch?v=hdsALpVJwgU&list=PL93mKxaRDidEfLM0I_FFb-98vfAQgXT82 해당 게시글은 위 링크의 강의를 보고 해당 내용을 정리한 게시글입니다! 리액트 -> ajax -> 데이터 변경 감지 -> UI가 자동 업데이트 리액트는 변경을 감지하는 엔진(Daemon), 그래서 서버처럼 계속 돌아야한다. 즉 리액트를 계속 동작하게 할 수 있는 서버가 필요하다. 이 서버가 Node.js 서버이다. 실행하게되면 리액트는 Node.js 위에서 계속 동작한다. 우선 VSCode 를 킨 후 reackwork 이름 폴더 만들어 열어주자 Node.js가 없다면 Node.js를 설치해주자 터미널에 node --version 명령어를 치면..
