“ 당신은 소프트웨어 품질을 추구할 수도 있고, 포인터 연산을 할 수도 있다. 그러나 두 개를 동시에 할 수는 없다. ”
React란?
웹 프레임워크로, 자바스크립트 라이브러리의 하나로써 사용자 인터페이스를 만들기 위해 사용된다.
즉 현재 많이 활용되고있는 웹.앱의 View를 개발할 수 있도록 하는 라이브러리이다.
React의 특징?
1. Data Flow
2. Component 기반 구조
3. Virtual Dom
4. Props and State
5. JSX
- Data Flow
React는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가진다.
단방향은 이처럼 관리하기 쉬운 특징뿐만 아니라 버추얼 돔(Virtual DOM)과 궁합이 잘 맞다.
뷰를 통째로 바꾸어주는 역할을 하기 때문에 단방향 데이터 방식은 DOM을 갱신할 때 큰 장점이 있다.
- Component 구조
React는 UI(View)를 여러 컴포넌트(component)를 쪼개서 만든다.
헤더, 메인 콘텐츠, 버튼, 사이드바 메뉴 같은 것들을 컴포넌트와 같이 하나의 컴포넌트로 묶어서 관리할 수 있다.
따라서 리액트를 개발하다가 특정 부분에서 오류가 생기면 그 컴포넌트만 수정하여 사용할 수 있다.
코드의 재사용성과 유지보수성을 증가시켜 준다.
- Virtual Dom
DOM은 Document Object Model의 약자입니다.
React는 이 DOM Tree 구조와 같은 구조체를 Virtual DOM으로 가지고 있다.
이벤트가 발생할 때마다 Virtual DOM을 만들고, 다시 그릴 때마다 실제 DOM과 비교하여 변경이 필요한 최소한의 변경사항만 반영한다.
앱의 효율성과 속도 개선
- Props and State
Props
Props란 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터이다.
읽기 전용 데이터라고 생각하면 되고,자식 컴포넌트에서 전달받은
props는 변경이 불가능하며 Props를 전달해준 최상위 부모 컴포넌트만 Props를 변경할 수 있다.
State
State는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다.
state는 동적인 데이터를 다룰 때 사용하며, 사용자와의 상호작용을 통해 데이터를 동적으로 변경할 때 사용한다.
클래스형 컴포넌트에서만 사용할 수 있고, 각각의 state는 독립적입니다.
- JSX
Javascript를 확장한 문법입니다.
React에서는 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 본질적으로 다른 UI 로직과 연결된다는 사실을 받아들입니다.
React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. 이후 섹션에서 다시 컴포넌트로 돌아오겠지만, JS에 마크업을 넣는 게 익숙해지지 않는다면 이 이야기가 확신을 줄 것입니다.
React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각합니다. 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해줍니다.
리액트 공식문서
React Create React APP 시작하기
npx create-react-app myapp
※주의
간혹 이렇게 에러메시지가 보이는 경우가 있다.
자세히 읽어보면
-npm uninstall -g create-react-app
-yarn global remove create-react-app
이렇게 따라하라고 나온다.
위에 처럼해도 안되면
npm uninstall -g create-react-app
npm add create-react-app
npx create-react-app myapp
순서대로 명령어를 입력하여 따라하면 된다.
