[포스코x코딩온] React 01 특징 및 설치

front -> back 을 지나서 다시 front로 돌아왔다. 

지금부터 가장 많이 사용하고 있는 react에 대해 배웠다. 아직 순수 자바스크립트만으로 코드 짜는 것도 벅차지만, 리액트를 배우면서 하나씩 더 채워나갈 예정이다. 

React

현재 가장 많이 활용하는 UI 화면을 만들기 위한 자바스크립트 라이브러리이다. 

웹의 규모가 커지면, DOM을 직접 건드리게 되면서 코드가 복잡해진다. 리액트는 UI 상태가 변경되었을 때, 처음부터 새로 만들어서 보여주자는 아이디어에서 생겨났다. 속도와 성능의 문제는 가상 Dom인 Virtual Dom으로 빠르게 변경하고  Virtual Dom과 Dom을 비교하여 브라우저 Dom에 패치한다. 

react는 특정 환경에 렌더링하기 위해 다른 라이브러리와 함께 사용될 뿐 , 프레임워크도 웹 전용도 아니다. 

모바일 애플리케이션을 구축하려면 React Native를, 웹 구축을 위해서는 reactDOM과 함께 사용한다. react와 reactDOM은 다른 진정한 웹 개발 프레임워크와 동일한 공간에서 논의되고 동일한 문제를 해결하는 데 활용된다. 

 

React 의 특징

1.  Data Flow

• 양방향이 아닌 단방향 데이터 흐름
• Angular JS 처럼 양방향 데이터 바인딩은 규모가 커질수록 데이터의 흐름을 추적하기 힘들고 복잡해지는 경향

2. Component 기반 구조 (react의 핵심)

리액트로 구성된 페이지의 View는 여러 컴포넌트로 구성되어 있고 이를 조립해서 화면을 구성한다. 

• 장점
  1. component단위로 쪼개져 있기에, 전체 코드 파악에 용이
  2. 기능 단위, UI 단위로 캡슐화(데이터와 데이터를 처리하는 행위를 묶고, 외부에는 그 행위를 보여주지 않는 것)시켜 코드를 관리하기에 높은 재사용성
  3. 반복되는 코드 없이 component만 import 해서 사용하면 된다는 간편함
  4. 애플리케이션이 복잡해져도 코드의 유지보수 , 관리가 용이하다. 

class App extends Component {
	render() {
    	return(
        	<Layout>
            	<Header />
                <Navigation />
                <Content>
                	<Sidebar></Sidebar>
                    <Router />
                </Content>
                <Footer></Footer>
			</Layout>
		);
	}
  }

3. Virtual Dom

: 이벤트가 발생할 때마다 생성하고 다시 그릴 때 실제와 전후 상태를 계속 비교하면서 최소한의 부분만 업데이트하며 앱의 효율성과 속도를 개선한다. 

- 변경될 요소만 변경된다. 

4. Props and State

• Props
  • 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 데이터
  • 자식에서는 props 변경X, props를 전달한 최상위에서만 변경O
• State
  • 컴포넌트 내부에서 선언되고 내부에서 값 변경
  • 클래스형 컴포넌트에서만사용O, 각각의 state는 독립적(함수형에서는 No!)

5. JSX(=javascript+XML)

: react에서는 JSX 사용이 필수는 아니지만 많이 사용된다. 

 

react 설치

node.js 설치로 npm 이미 설치되어 있는 상황이다.ㅏ 

초기 설정 cd > Users > ls 사용자명 확인

경로로 이동 후 npm 권한 부여

sudo chown -R 501:20 "/Users/jiyoungjung/.npm"

Password : 입력 후 

파일 생성하고 싶은 경로로 이동 후 npx create-react-app 뒤에 파일명으로 파일 생성

01_react  파일 생성

npx create-react-app 01_react

앱 이름에서는 대문자 사용 불가 

npx 란 ?

npm의 자식 명령어로 npm보다 가볍게 패키지 구성

npm start 하면 react 서버 열림.

├── README.md
├── node_modules
├── package.json
├── package-lock.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── reportWebVitals.js
    └── setupTests.js

 

JSX 사용하기 

1. 최상위 요소는 형제가 없는 고요한 요소! 반드시 부모 요소 하나가 감싸는 형태를 가져야 한다. 

2. JSX 안에서 javascript 사용이 가능하다. JSX 안에서 javascript 문법을 사용할 때는 {  }안에서 사용하기

3. 연산자를 사용할 때는 계산을 다 한 후, 변수에 담아서 JSX문법에서 보여주기 or { } (if, for 사용X)

4. 요소에 스타일을 적용할 때는 문자열이 아닌, 객체 형태로 사용

5. style 사용 시 camelCase 이용

6. 종료태그 필수 없으면 self-closing

7. 주석의 사용 {/*  *}

---

https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started#hello_react

Getting started with React - Learn web development | MDN

 

https://react.vlpt.us/basic/03-first-component.html

3. 나의 첫번째 리액트 컴포넌트 · GitBook