한입 크기로 잘라 먹는 리액트 -Node.js 및 React.js 기초 - [인프런]

Nods.js 기초

리액트가 자바스크립트의 라이브러리이기 때문이다.

 

 

자바스크립트가 어디에서 어떻게 동작하나 ?

우리는 브라우저에 내장된 자바스크립트 엔진을 사용해야 하기 때문에 자바스크립트는 원래 웹브라우저에서만 실행 될 수 있었다.

그리고 그 브라우저는 html 문서를 기반으로 동작을 하니 , 자바스크립트는 html 안에서 실행이 되는것이다.

 

즉, 이런 너무 좋은 언어를 브라우저 안에서만 사용하긴 아깝다 !! ==> 다른곳에서 사용해 보입시더~

 

V8엔진을 브라우저에서 똑 떼서 아무곳에서나 실행 시켜보자 !! ==> Node.js 

즉 자바 스크립트가 가진 태생의 한계를 극복하고 다른 개발에도 사용이 가능 !

url은 웹서버의 주소 !

 

웹서버는 도메인 주소를 받아 알맞은 웹파일을 던져준다 !

 

리액트는 복잡한 자바스크립트 파일들을 쉽게 만들어낸다 !

리액트로 만든 웹사이트를 웹 어플리케이션이라고 부른다 !

 

 

다른 파일에 있는 함수 사용하기 예시

 

 

 

main : 진입 파일

 

scripts : 개발하며 자주 사용하는 명령어 정의

 

 

 

 

 

 

 

 

 

npm i 를 하면 package

 

dependencies에 해당 모듈이 추가 되며

node_modules폴더에 실제 해당 모듈을 구성하는 코드가 들어온다.

.package-lock에는 실제 패키지들의 버전이 적혀 있다.

 

 

npm 으로 받은 모듈들은 경로 명시없이 그냥 써주면 된다.

 

Why React ?

 

중복이 너무 많다 !

 

중복되는 모듈을 리액트의 컴포넌트를 활용해서 컴포넌트 이름만 넣어 타이핑 수를 줄여 개발할 수 있고 유지 보수가 좋아진다.

 

==> 그래서 Component 기반 UI 라이브러리인 React를 사용해야 한다.

 

 

 

잦은 업데에트 상황에서 실제 DOM이 아닌 가상의 DOM에 그린뒤 리얼 DOM에 업데이트 시킨다.

 

Create React App

 

 

npx : 설치되어 있지 않은 패키지를 딱 한번만 사용할 때 사용

npx create-react-app reactexam1

 

 

npm start를 실행 시킨 순간 나의 컴퓨터는 웹서버가 된것이다.

그러면 웹 브라우저(크롬)으로 웹사이트에 접속을 할 수 있다.

 

 

index.js 에서 App.js을 import해 와서 그 반환한 값을 id가 root인 요소 밑에 render하겠다 !

id가 root인 요소는 어디 있나 ? public 폴더 내부의 index.html에 있다.

 

 

정리하자면

앱이 실행이 되면 index.js가 실행되면서 index.html에 있는 id 가 root인 div아래로 App.js가 리턴하는 값이 들어간다.

 

 

JSX ( javasciprt와 html을 합쳐서 사용할수 있는 표현식)

 

 

1. 닫힌 규칙

모든 태그를 닫아 줘야 하며 

셀프 클로징 태그 라고 하는걸 주로 활용한다.

 

2. 최상위 태그 규칙

jsx로 컴포넌트를 만들고 사용하려면 반드시 부모 태그가 하나는 꼭 있어야한다.

 

css파일을 사용해서 스타일링 예시

 

 

인라인 스타일링 방식은 css파일을 사용하지 않고 객체를 만들어서 스타일링한다.

 

조건부 렌더링을 활용한 javasciprt사용 예시

 

 

 

 

State

State : 계속해서 변화하는 특정 상태

상태에 따라 각각 다른 동작을 함

 

 

 

useState는 배열을 반환하고 구조 분해 할당으로 분배한다.

count는 상태로 사용하고 두번재 변수 setCount는 count를 변화 시키는 상태 변화 메소드이다.

useState의 인자는 count의 초기 값으로 사용이 된다.

 

리액트는 컴포넌트가 가진 state가 바뀌면  리렌더링한다.

 

 

 

Props  ( 프로터티스의 줄임말)

객체 안에 props가 담겨서 온다.

 

 

점표기법으로 props 사용

 

 

 

 

 

 

 

 

 

 

props가 여러개일 떄는 객체를 만든뒤 스프레드 연산자를 활용해서 사용

또한 받는 쪽는 비구조할당으로 객체를 통으로 받는다.

 

props에 잘못된(선언하지않은) 값이 들어와 NaN이반환되는걸 방지하기 위해

defaultProps를 사용한다.

 

 

리액트의 컴포넌트는  부모가 내려주는 Props가 변경되면 다시 렌더 한다. + 부모가 리렌더되어도 자식도 리렌더 된다.

 

 

 

 

컨테이너 컴포넌드의 자식으로 배치된 요소들은 자동으로 컨테이너 컴포너트의 Props로 들어간다.