잠송 키우기

React Hook : state machine에 연결하는 방법 functional component에서 state를 가질 수 있게 해줌 => class component, did mount, render ... 등을 안해도 됨 => 함수형 프로그래밍 +) 관련 영상 참조 총 2가지의 useState hooks에 대해 정리 1. useState useState 항상 2개의 value를 return 한다. 초기에 state를 initialState를 세팅할 수 있는 옵션을 제공한다. const [item, getitem] = useState(1); **hook으로 짠 코드와 class component로 짠 코드 비교** [hook] const App=()=>{ const [item,setItem]=use..

개발환경 : WSL2mnt폴더가 아닌 리눅스 홈에 새로운 폴더 하나를 생성하여 진행하였다.윈도우환경보다 훨씬 빠르다 ! node.js , npm, npx 설치 ! 버전은 LTS로 하였다 WSL2 환경에서 cd ~(home)에 Documents폴더를 만들어준 후wsl환경 설정하는 방법npx create-react-app movie_app_2021 명령어를 실행한다.그다음 code movie_app_2021 을 실행한다.(또는 폴더로 직접 이동하여 vscode를 연다.) git 과 연동git init - 여기서 reinitialize ~~ 라고 뜬다.git repository 생성git remote add origin [your repository address]git add .git commit -m "i..

완성 소스1 → 영화진흥원 API사용(포스터 x) 완성 소스2 → 강의내용 API 사용(포스터o) 이 포스팅은 강의내용API를 사용한 완성 소스2 에 관한 포스팅이다. [미리보기] 미리보기 프로젝트 시작 개발환경 구축, JSX 와 props, state에 대한 설명은 같은 카테고리의 글을 참고하길 바란다. 개발환경 구축이 완료되었다면 프로젝트를 시작할 수 있다 ~! 디렉토리 구조 실행 환경 API 받아오기 yts.mx 라는 사이트에서 영화 관련 API를 받아온다. (axios를 사용) API로 받아오는 영화 데이터를 다루기 위해서 movies.js 파일을 생성했다. 컴포넌트 라이프 사이클을 활용하여 로딩이 끝난 다음 데이터를 불러 띄우는 과정을 진행하였다. render 함수가 호출되고 나서 어떤 함수가 ..

React는 component 를 사용해서 html처럼 작성하려는 경우에 필요 컴포넌트와 App.js 컴포넌트는 ReactDom을 렌더링 하는 과정에서 필요한 함수적 요소이다. 말 그대로 HTML을 뱉는(반환하는)함수! 이것을 App.js 파일에서 각각 만들 수 있다. Html을 JS로 다루는 기술인데, 우리는 이 기술을 JSX라고 한다. javascript안의 HTML = JSX (react에만 특화된 개념) -jsx 에서 component에 정보를 보낼 수 있음 -React는 재사용가능한 component를 계속 만들 수 있음 -component간의 정보전달 가능(father가 children에게) -ex) Food component 에 kimchi 라는 value로 prop name을 줌 웹사이트에..