세 번째 도전 🙄

LifeCycle API 컴포넌트가 나타날 때, 업데이트 될 때, 사라질 때의 중간 과정에서 어떤 작업을 하고싶을 때 LifeCycle API를 사용한다. (뭔소리야 이게ㅎ) Life Cycle method란 리액트가 컴포넌트를 생성하고 없애는 방법! 뭔 소린지 1도 모르겠다,,, 🧐 일단 이런 게 있구나 정도만 하고 넘어갈래.. ㅠㅠ

노마드코더 듣다가... 도저히 뭔말몰이라서 벨로퍼트님의 강의를 듣기 시작 리액트는 컴포넌트에 집중되어 있는 라이브러리. 리액트의 Virtual DOM 자바스크립트로 이루어진 가상의 DOM에 한번 렌더링하고, 기존의 DOM과 비교 후 정말 변화가 필요한 곳에만 업데이트 바뀐 부분만 찾아서 바꿔주는 것! JSX 참고자료 : https://react-anyone.vlpt.us/03.html HTML과 비슷하지만 지켜야 할 규칙이 몇 가지 있다. 태그는 꼭 닫혀있어야 한다. 예를 들어 input 태그의 경우, 이렇게 닫아도 되지만, /> 이렇게 닫아도 된다. (self-closing tag) 2개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸져있어야 한다. ( > 16.2에 Fragment라는 기능이 도입됨...

STATE JSX, PROPS에 이어 STATE라는 개념을 알아보자. state는 동적 데이터(변하는 데이터)와 함께 작업할 때 만들어진다. class component는 class지만 react component로부터 확장되고 스크린에 표시된다. (phone에서 확장된 삼성폰, 아이폰이 phone의 요소인 스크린, 충전부, 카메라 등을 공통적으로 갖는 것과 같음) 그걸 render method안에 넣어야 함. (render가 뭐하는 건지 안 와닿는다,,) react는 render method 안의 html같은 요소들을 자동으로 실행한다. state는 오브젝트이다. 이 state에 component의 데이터를 넣을 공간이 있고, 이 데이터는 변한다.

React JS의 동작 원리(?) virtual이고 존재하지 않는다. 그래서 빠름! App.js와 index.js 파일이 있는데, 그 중 App.js 파일의 div에 아무리 뭐라고 써도 html에서는 안 보인다. (virtual) vsc에서 저장하는 순간 바로 웹에서 자동으로 새로고침 됨. 신기신기 (궁금) 니꼬가 vsc에서 터미널1 : node, 터미널2 : zsh 를 왔다갔다 하는 것 같은데 왜 그런거지..? React JS 살펴보기 꼭 npm start 하고 그대로 두어야 함. 그게 서버이기 때문! react는 component와 함께 동작한다. 모든 것은 component다. component란, HTML을 반환(return)하는 함수다. react는 component를 사용해서 HTML처럼 작성..

초기 설정 node JS 설치하기 npm 설치하기 (node JS 설치 시 자동으로 설치됨) npx 설치하기 VSC 필요 (코드 에디터) git 설치하기 (git-scm.com 에서 다운로드) 사전 지식 HTML, CSS, 바닐라 JS node JS도 살짝 알면 좋음. package.json 정도. 몰라도 ㄱㅊ React 시작하기 (터미널에 입력) cd Documents (터미널에 입력) npx create-react-app movie_app_2020 (회색부분은 생성할 폴더 이름) VSC에서 폴더 열기 > 터미널 창 (단축키 ctrl + J) 에 npm start 입력 GitHub에 추가하기 + 버튼 눌러 새 터미널 추가해서 git init 입력 github에 새로운 repository 생성. 폴더 명..