React란?
페이스북에서 개발하고 관리하는 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리 .
리액트는 선언적인 프로그래밍을 접목을 시켰다.
예시) 청소하는 로봇에 절차적으로 하는게 아니라 정리된 방의 사진을 찍어서 로봇은 똑같은 모습으로 구현하기 위해서 과정을 생략... 결과가 중요.
다른 라이브러리나 프레임워크에 비해서 생태계가 활성화 되어 있어서 많이 사용된다.
::Node.js
Node.js 는 자바스크립트가 브라우저 밖(ex. 서버)에서도 동작하게 하는 환경
::npm(node package manager)
패키지도구. npm을 통해 다양한 패키지를 설치하고 버전 관리
Node.js 설치 후엔 위의 사진과 같이 터미널에 node -v, npm -v 명령어를 입력하여 버전을 체크하고 올바르게 설치 되었는지 확인
예)앱스토어 어플을 다운을 받을때 앱스토어 같은 역할을 한다. 구글 플레이스토어.
create-react-app
리액트 개발환경 세팅해주는 도구(tool chain).리액트로 웹 애플리케이션을 만들기 위한 환경을 제공함. 하나의 명령어로 리액트 개발환경을 구축할 수 있다.
component
재사용 가능한 UI 단위.
컴포넌트는 독립적으로,재사용가능한 코드로 관리한다. 하나의 컴포넌트에 필요한 html, css, js를 모두 합쳐서 만들수 있다.
컴포넌트는 함수랑 비슷하다. 함수도 기능이 독립적이고, 한번 선언해두면 필요할때 재사용가능.함수처럼 input받고 return 할 수 있다.
React 컴포넌트에서는 input을 props라고 말하고 return은 화면에 보여져야할 React요소가 return됩니다.
JSX(javascript XML)
리액트에서 만든 문법
1.반드시 부모 요소 하나가 감싸는 형태여야 한다.
-virtual DOM에서 컴포넌트 변화를 감지시 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙
2.자바스크립트 표현식
- JSX 안에서도 자바스트립트 표현식 사용이 가능하다. {}로 감싸주면 된다.
- 유효한 모든 자바스크립트 표현식을 넣을 수 있다.
3.if문(for문) 대신 삼항 연산자(조건부 연산자)사용
- if문과 for loop은 표현식이 아니기 때문에 JSX 내부 자바스트립트 표현식에서는 사용할 수 없다. {}안에서 삼항 연산자를 사용한다.
4.ReactDOM은 html attribute 이름 대신 camelCase Property 명명규칙 사용
- 스타일링: 객체 형태로 넣어줘야 한다.
- 카멜표기법으로 해야한다.(예) backgroundColor
- class 대신 className
5.주석 사용법
{/*<div></div>*/}