npm과 yarn
npm : npm install 파일이름(패키지 깔 때)
yarn : yarn add 파일이름(패키지 깔 때)
- 공통점 : 둘 다 자바스크립트 런타임 환경에서 돌아가기 때문에 node패키지 관리자라고 부른다
->런타임이란? : runtime돌아가는시간, 수행되는 시간(환경) , 즉 프로그래밍 언어가 구동되는 환경, 자바스크립트 언어가 구동되는 환경
- 자바스크립트가 돌아가는 런타임 환경
- 노드환경
- 브라우저 환경
- CPA란?
CPA(create react app) : 한 줄의 명령어 입력으로 react 프로젝트 개발에 필요한 필수 요소를 자동으로 구성하는 방법이다.
-->cpa를 쓰는것은 완재품을 구매하는 것과 같고,,
-->cpa를 안 쓴다는것은 모든 재료와 도구를 구매하여 하나씩 조립하여 제작하는 것과 같다
-render(렌더) : html 요소(element), 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것을 렌더링(rendering) 이라고 말합니다.(화면에 그린다는 뜻)
- React component(리액트 컴포넌트)
- 리액트를 개발하는 방법이라고 한다.
- 컴포넌트를 통해 ui를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다(개별 은 즉 독립적이라는 말)
- 컴포넌트는 자바스크립트 함수와 유사하다. js함수는 input과 output이 존재하는 것처럼 컴포넌트도 props라는 입력(input)을 받고 리액트엘리먼트를 아웃풋(화면에 표시되는)것으로 주는 것이 유사하다
++엘리먼트는 React의 가장 작은 단위입니다. 엘러먼트는 화면에 표시할 내용을 담고 있습니다. 브라우저 DOM 엘리먼트와는 다르게 React 엘리먼트는 일반 객체이며 쉽게 생성할 수 있습니다. React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트합니다.
--->그냥 단순히 화면에 그려지는 HTML적 요소!!
- react component(리액트 컴포넌트)의 표현방식
- 함수형 컴포넌트 : 우리가 사용할 것
- 클래스형 컴포넌트
-
import 와 export
im(안쪽)port(항구) : 수입한다
ex(바깥쪽)port(항구) : 수출한다
--> 컴포넌트를 만들어서 바깥으로 내보낸다. (import와export는 컴포넌트 밖에 있따)
--> 내가 필요한 파일을 IMPORT 하고 작업이 끝나면EXPORT -
함수의 시작부분부터 ~ return문 바로 위까지 : javascript영역
-
return문 안 역역에서 끝까지 : JSX영역
-->JSX란? : (JS + XML(=HTML)) 이것을 "쟉스"라고 부른다. 고로 자바스크립트 언어를 쓰고 싶다면 쟉스 구역 안에서(쟉스 문법안에서) 중괄호{}를 쓰면 된다. -
컴포넌트 구별법
function (App)이면 App컴포넌트이다. 컴포넌트 이름은 무조건 대문자로!!(폴더는 소문자) -
부모자식 컴포넌트
. 컴포넌트 안에 또 다른 컴포넌트가 들어가기 가능하다
. 다른 컴포넌트를 품는 컴포넌트: 부모 컴포넌트
. 안에서 품어지는 컴포넌트 : 자식 컴포넌트 -
props
- 컴포넌트의 중요한 정보교환 방식(데이터를 주고 받는 방식)
- props는 반드시 위에서 아래 방향으로만 흐른다.(부모->자식)방향으로만
- props는 반드시 읽기 전용으로 취급하며 변경하지 않는다.
(기존의 컴포넌트 방식에선 자식->엄마의 뱡향이었지만 props는 반대다. props를 통해 자식 컴포넌트에게 엄마가가진 데이터를 물려줄 수 있다)
-->상속 ㅎㅎ
-
props drilling
부모->자식 컴포넌트간 데이터 전달이 이루어지는데 부모->자식->그자식->그자식의 자식 , 이렇게 그 자식의 자식이 데이터를 전달 받기 위해서 무려 3번이나 데이터를 내려줘야한다는 것을 prop drilling이라고 한다.
==props가 아래로 뚫고 내려간다 -
props children
자식
여는 tag 닫는 tag 사이에 어떠한 값을 둔다면 children으로써 인식이 된다. -
defaultProps
부모 컴포넌트에서props를 보내주지 않아도 설정될 초기값
(app에서 값이 안 내려올 수도 있다는 걸 예상해서 미리 값을 설정) -
dafaultArgument
매개변수가 지정되지 않았으면 자동으로 지정해줄 값을 정하라는 의미.
defaultprops와 비슷
