1일차 - 리엑트 입문
OS는 Operating System, 운영체제를 의미함. (window, mac, linux(ubuntu))
프로젝트를 시작하기 위해서는 Node.js를 OS에 설치.
Node.js는 브라우저에서만 작동하는 자바스크립트를 브라우저 외 다른 환경에서도 사용할 수 있도록 해주는 실행도구.
node.js에서 자주 쓰이는 자바스크립트 코드들을 패키지로 만들어 모아놓은 하나의 저장소가 npm이고, yarn은 페이스북에서 만든 속도가 조금 더 빠른 package manager!!
React ?
자바스크립트를 이용해 쉽고 효율적으로 웹 서비스를 만들 수 있도록 페이스북에서 만든 도구
리액트보다 더 추가된 기능을 사용하기 위해 Next.js라는 프레임워크를 설치했다.
즉, next.js는 react의 업그레이드 버전!! 이라고 보면됨.
이렇게 프로젝트를 설치하고 보면 초기세팅 구조가 보이는데 이 부분을 보일러플레이트 라고한다
기존에는 html,css,js 각기 따로 사용하였으나,
리액트/Next.js를 사용하는 실무에서는 단순 html 대신 jsx 방식을 사용하고 emotion을 이용하여 나만의 태그를 만들 수 있는 CSS-IN-JS 방식을 사용해보았다.
그리고 각각 다른 파일(폴더)에서 가져오기위해 import로 가져와 export로 내보내어 사용하였다.
2일차 재정리
git clone 클론받을 레파지토리주소
clone을 받고 실행시 yarn dev를 바로 하면 열리지 않았다.
yarn dev는 package.json 이 있는 곳에서 해 주어야하는데, 이때 node_modules가 없으면 yarn dev도 실행되지 않는다.
package.json은 단지 설치 이력들이 들어있는 것으로 보면되고, 실제 소스파일들은 node_modules에 있기에
yarn install 이라는 명령어로 설치해줘야한다.
이렇게 많은것을 설치하고... 태그도 좀 다른데 왜 리엑트를 사용하는것일까?
실제로 왜 실무에서는 대부분이 리엑트를 사용할까?
가장 사용자 수가 많아서 커뮤니티 활성화가 잘되어있고 웹, 앱, 데스크탑 앱 모두 만들 수 있기 때문이다(크로스 플랫폼).
리엑트에는 컴포넌트라는 개념이 있는데,
부품 을 의미한다고 할 수 있다.
즉, 컴포넌트로 만들어둔다면, 어디서든 적합한곳에 조립하여 사용할 수 있다는 것이다.
컴포넌트
컴포넌트도 두가지로 나뉜다.
우리가 지금 사용하는 함수형 컴포넌트 이전에는 클래스형 컴포넌트가 존재했다.
이전에는 함수형 컴포넌트에서 지원되지 않는 기능들이 있어서 클래스형 컴포넌트를 사용했는데, 리엑트에서 제공되는 use로 시작하는 (hooks)훅을 사용함으로써 함수형컴포넌트 사용을 더 많이 사용하게되었다.
이 hooks는 react에서 import 해오는데, 이 React-Hooks 중에서 useState에 대해 배웠다.
state를 컴포넌트 전용변수 라고하는데,
const [state,setState] = useState(초기값)
state부분에는 변수를 , setState부분에는 바꿀 데이터값을, useState뒤 소괄호에는 초기값을 넣어주어 사용한다.
let 이나 const 를 사용한다면 document.getElementById 을 이용하여 매번 자바스크립트를 사용해서 변경된 값을 화면에 다시 그려줘야한다.
반면 state는 담겨있는 데이터가 변할 때 자동으로 화면을 다시 그려주기 때문에 코드도 짧아지고 편리하다
