1. 오늘 공부 핵심 키워드

// 리액튼 나도 시작한다 //이렇게 공부해도 되는 걸까?
// 초기 설정하는 거 조금 까다롭네....
// 컴포넌트는 쉬운데... props는 쉬우면서도 헷갈리네...

2. 초기값 및 프로젝트 생성하기

- nodejs를 설치하고 깃베쉬 혹은 cmd를 열어 yarn을 설치한다.

- npm과 yarn의 차이점은???

• npm과 yarn 모두 소프트웨어 패키지를 설치하는 프로그램이지만, 패키지가 완전히 설치 될 때까지 기다린 후 다른 패키지를 설치한다. 하지만 yarn은 병렬적으로 다른 패키지의 설치를 기다리지 않는다. 그래서 설치 속도가 npm보다 빠르다
• npm은 yarn에 비해서 보안성도 취약하다고 한다. 반면, 다른 패키지를 즉시 포함시킬 수 있는 코드를 자동으로 실행하므로, 보안 시스템에 여러 가지 취약성이 발생한다. 반면에, YARN은 yarn.lock 또는 package.json 파일에 있는 파일만 설치한다.

npm install -g yarn

• 깃베쉬에서 yarn을 설치할 때 입력하는 명령어

- 프로젝트를 생성할 때 편하게 생성하는 법은 비쥬얼스튜디오코드에서 프로젝트를 생성하고자 하는 폴더를 열어둔 다음 터미널을 연다. 그런 다음 아래와 같이 코드를 입력하고 'create react-app' 뒤에 한 칸 띄어쓴 뒤에 파일명을 입력하면 짜잔 프로젝트 폴더가 패키지와 함께 설치된다.

yarn create react-app 파일명

3. 컴포넌트

- 리액트를 쓰는 이유 중 가장 하나! 컴포넌트를 만드는 법이다.

- 리액트는 마크업 언어를 함수 안에 작성하여 렌더링을 해주는 방식이다. 그렇기에 html 태그 레이아웃들을 함수 안에 만들어서 아래의 사진과 같이 사용할 수 있다. 아래 사진은 props도 들어가 있지만, 3개의 컴포넌트를 만들어 놓은 것이다.

4. JSX문법

• 1. 병렬해서 태그를 사용할 수 없다. 태그가 열리면 반드시 닫혀야 한다. 아래와 같은 구조여야 한다.

div영역

• 2. 자바스크립트를 불러오려면 retrun 위에다가 쓴다.
• 3. 태그들의 식별자는 class 대신 className!
• 4. 태그에 인라인으로 css를 줄 때는 중괄호를 두 번 쓰고{{ 스타일명: 스타일 속성, 스타일명: 스타일 속성}} json 형식으로 쓴다. 예시는 아래와 같다.

5. props(프로퍼티)

- props는 properties의 줄임말로 성질 특성을 타나내는 단어라고 한다. 상위 컴포넌트가 하위 컴포넌트에게 값을 전달할 때 사용한다. 그렇기에 리액트에서 속성값을 나타내는 단어이다.

• props를 사용할 때는 속성의 값을 잘 나타낼 수 있는 이름으로 jsx문법을 활용하여 작성해준다.

• props는 컴포넌트 태그 안에다가 작성을 하고 반드시 키에 대응하는 값에는 {}를 적용한다.

• 그리고 각 컴포넌트 함수에다가 매개변수를 넣어준다. 매개변수는 사용자가 알아보기 쉬운 단어로 작명해주면 된다.

• props에 접근할 수 있는 방식 중 하나는 props.key를 입력해주면 된다. 자바스크립트의 'const 작명이름 = 값'은 하나의 객체라고 보면 좋다.

  - props 즉 속성을 전달하는 방식에는 children 방식이 존재한다. 상위 컴포넌트에서 비어있는 자식 컴포넌트로 속성을 전달한다.

  

• 참고로 html를 렌더링 하는 App함수 역시도 컴포넌트로 취급한다. 그렇기에 상위 컴포넌트라고 할 수 있다.
  -위와 같이 상위 컴포넌트에 내용을 적고 하위 컴포넌트인 User에는 아무런 내용이 없다면 상위 컴포넌트인 App에 적힌 것을 하위 컴포넌트로 전달할 수 있다.

  

  -레이아웃 컴포넌트를 사용할 때 쓰는데, 위와 같은 형식이다. 즉 레이아웃을 컴포넌트로 만들어놓고, 거기에는 아무런 내용이 없다.

- props를 사용하는 또 다른 방법이 존재한다. 바로 props.키값이 아니라 자바스크립트에서 변수를 매개변수로 넣어줄 때처럼 사용하는 게 있다. 그게 바로 구조분해 할당이라는 것이다.

- 구조분해할당을 사용할 때는 반드시 중괄호{ }와 함께 사용해야 한다. 아래와 같다.