Jaybon 의 지식창고

리액트에는 펑션 컴포넌트가 있고 클래스 컴포넌트가 있다

변수는바뀌었으나 내용은 그대로다

렌더를 강제로 실행해야한다

무조건 setState를 사용했을 때 값이 바뀐다는 점

Components

Nav.js

LoginBox.js

JoinBox.js

Article.js

----------------

page

Join.js

list.js

----------------------

join.js 에는

import Nav / Footer / LoginBox

function abc(){
         return (
              <div>
                  <Nav></Nav>
                  <LoginBox></LoginBox>
                  <Footer></Footer>
              </div>
          )
}

---------------------------

blog.naver.com/getinthere/222025997436

index.css

flex-direction 기본은 row

basic.css

index.css

  justify-content: 정렬 방향대로 

  align-items: 정렬의 수직방향대로 세팅

부모의 높이만큼 다 차지하는 것을 스트레치 라고한다

아래가 디폴트

반응

래핑을 걸면 자기 크기에 따라서 반응한다

 flex: 0 1 auto;

0자리는 그로우 (비율정하기 + 늘어날때 비율) 0이면 자동으로 안늘어남

1자리는 쉬링크 (비율정하기 + 줄어들때 비율) 0이면 자동으로 안줄어듬

auto는 기본크기

위 빨간 박스의 div 안에 화면이 들어간다

리턴 담당이 App이고 index.html의 id가 root인 태그 안에 넣는다

JSX 문법

자바스크립트로 그림을 그리기 위한 것

지금까지 기본 사용법.

css를 사용할 수 있는 프레임 워크를 설치 하면됨

https://heropy.blog/2017/11/25/yarn/

yarn 설치법

저장할 시 자동 정렬

설정 - prettier

홑따옴표

yarn 라이브러리를 찾는 곳

npm 라이브러리를 찾는 곳

익스텐션에서 설치

자동완성

리액트에서는 css를 따로 쓰지 말고 컴포넌트 안에 만들어 두면 편하다

디자인과 html을 같이 세팅

HTTP : 요청이 오면 서버에서 모든 데이터를 가져와서 뿌려줌 (request)

AJAX : 화면의 데이터나 모양 일부만 통신하여  변경하여 뿌려줌 

REACT : 데이터가 변경되면 REACT가 알아서 변경하여 뿌려줌 (request 없이)

https://ko.reactjs.org/

node.js - 웹브라우저가 아닌 곳에서도 자바스크립트로 앱을 만들 수 있도록 한다

node는 v8 engine 특징
1. 싱글 스레드
2. Non-block-io  - walker에게 io를 맡긴다 (io가 일어날 때 멈추지 않는다)
3. 

https://nodejs.org/ko/

vs code 를 이용하자

깃 배시로 셸을 선택한다 (리눅스 셸로 입력하기위함)

app파일의 리턴만 수정하고 저장하면 html이 바뀐다

함수형 컴포넌트

클래스형 컴포넌트

클래스형 컴포넌트와 함수형 컴포넌트의 차이점은

클래스형 컴포넌트의 경우
- state 기능
- 라이프사이클 기능을 사용할 수 있다는 것 
- 임의 메서드를 정의할 수 있다는 것
- render함수 필수 + JSX반환 

함수형 컴포넌트의 경우
- 클래스형자료형보다 선언하기 편하다
- 메모리 자원도 클래스형 컴포넌트보다 덜 사용
- 배포시 파일크기가 작다 (성능과는 관계가 없음)
- state와 라이프사이클 API의 사용이 불가능하다는 점
(리액트 V16.8 업데이트 이후 Hooks라는 기능이 도입되면서 해결)
- 

리액트 공식 매뉴얼에서는 컴포넌트를 새로 작성할 때 함수형 컴포넌트와 Hooks를 사용하도록 권장.

참고사이트

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

회전 등 웹화면의 애니매이션을 생략없이 실행하는 옵션이다.

reduce를 사용하면 화면의 애니매이션이 생략된다.

no-preference 일 때

reduce 일 때

그런데 나의 경우 옵션이 반대로 적용되는 것이었다.

이유를 2시간동안 헤메며 찾아본 결과

위의 링크의 설명대로 윈도우 설정의 문제였다.

아래의 애니메이션이 [켬]상태가 기본인데 나는 자잘한 효과가 싫어서 끔 상태로 했더니 반대로 적용 된 것이었다.

환경

windows10

목차

1. nodejs  설치

2. yarn 설치

3. vscode 설치 + 플러그인 설치

4. 원하는 디렉토리에서 git으로 리액트 예제파일 다운로드

nodejs  설치

아래 링크로 가서 윈도우 버전을 다운로드 받자

https://nodejs.org/ko/download/

다운로드 받고나서 설치

yarn 설치

npm은 nodejs의 패키지를 관리해주는 도구로 nodejs설치할 때 기본으로 설치된다고 한다.

yarn은 npm을 대체할 수 있는 도구로 npm보다 더 빠르며 효율적인 캐시 시스템과 기타 부가 기능을 제공.

아래 링크에서 다운로드 하자

https://classic.yarnpkg.com/en/docs

Getting Started

스태이블 버전을 다운로드 하자

vscode 설치 + 플러그인 설치

https://code.visualstudio.com/

아래의 플러그인을 설치한다

1. ESLint： 자바스크립트 문법 및 코드 스타일을 검사

2. Reactjs Code Snippets： 리액트 컴포넌트 및 라이프사이클 함수를 작성할 때 단축 단어를 사용하여 간편하게 코드를 자동으로 생성해 낼 수 있는 코드 스니펫 모음.
검색했을 때 유사한 결과가 여러 개 나올 수 있으니 제작자가 charalampos karypidis인 것을 설치.

3. Prettier-Code formatter： 코드 스타일을 자동으로 정리해 주는 도구.

원하는 디렉토리에서 git으로 리액트 예제파일 다운로드

예제파일을 받아보자

yarn create react-app hello-react

엔터를 치면 주르륵 깔린다

결과

해당폴더에 리액트 예제가 깔렸다

vscode에서 열어보자(폴더는 hello-react를 선택하자)

vscode에서 터미널을 켜자

yarn이 안될 경우 아래를 따라해보고 그래도 안되면 기본 터미널을 git bash로 바꿔보자

stackoverflow.com/questions/43313178/react-native-error-yarn-is-not-recognized-as-an-internal-or-external-command

yarn start 입력

인터넷 창이 뜨며 해당 화면이 출력되면 성공