React
사용자 인터페이스를 만들기 위한 JavaScript 라이브러리
⚪ 기존의 MPA ( 새로 HTML 을 받아와 Re-load) 가 아닌,
"SPA" 방식을 통해 JSON 형태로 변경된 부분만 받아와 Rendering
⚪ "Component"를 만드는 기술 ( Component = 사용자 정의 태그 )
<script>
--- 생성 ---
function Article(){
return <div>
<h2> Welcome </h2>
Hello, React
</div>
}
--- 사용 ---
<div className="App">
<Article></Article>
</div>
</script>React 의 장점
· 생산성 / 재사용성
Component 와 Hook 을 활용
작은 단위의 독립적인 요소로 개발하여 개발자의 생산성과 코드의 재사용성을 높임
-- HTML / JS --
<body>
<span id="text"></span>
<script>
document.getElementById("text").innerText = "hello world";
</script>
</body>
-- React --
const App = () => {
const text = "hello world";
return <span>{text}</span>;
}👉 레이아웃을 구성하는 HTML 과 UI 내 데이터를 변경하는 JavaScript 로직이 분리되어 있어 코드 파악에 오랜 시간이 걸림
👉 JSX를 활용하여 HTML 내에 필요한 데이터를 한 공간에 삽입할 수 있어 개발이 간단해지고 다른 사람이 개발 의도를 파악하기 쉬워짐
· 풍부한 자료와 라이브러리
React 는 전세계적으로 가장 활발하게 커뮤니티 활동이 이뤄지고 있어 방대한 자료와 편리한 오픈소스 라이브러리 등이 공유
· 다양한 사용처
웹 애플리케이션 뿐만 아니라 React 지식을 바탕으로 React-Native 에 적용하여 안드로이드 및 iOS 애플리케이션 등을 개발할 수 있음
구성요소
⚪ Component
· React 에서 서비스를 개발하는데 있어 독립적인 단위로 쪼개어 구현하기 위한 것
⚪ Virtual DOM
· 가상적인 표현을 메모리에 저장하고 ReactDOM 과 같은 라이브러리에 의해 실제 DOM 과 동기화하는 프로그래밍 개념
· 가상 DOM 을 메모리에 저장 👉 실제 DOM 과 비교 👉 바뀐 부분만 실제 DOM 에 동기화
⚪ JSX
· JavaScript 내에서 UI 를 작성하기 위해 개발자에게 익숙한 환경을 제공, HTML 과 유사
Component
페이지를 구성하는 최소단위
· ui 기반으로 선언되어 App 을 이루는 가장 작은 단위
· 하나의 'Block' 을 만들어 필요한 곳에 '조립'하여 개발 가능
· Class - Function ( v16 이후 주류 )
· Controlled - Uncontrolled
규칙
· 이름의 첫글자는 대문자로 시작
· 상호 간 데이터 교환 = "Props" // 내부의 데이터 관리 = "State"
· 데이터는 부모 👉 자식, 단방향으로만 전달
· 다른 곳에서 활용하기 위해 export, import 사용, 이후 호출은 HTML Tag 처럼 "꺽쇠" 활용
👉 <Welcome/>
Props
<script>
<MyComponent user={{name: "수지"}} color="blue>
<div>안녕하세요.<div>
</MyCompnent>
--
const MyComponent = (props) => {
const { user, color, children } = props
return (
<div style={[ color }}>
<p>{user.name}님의 하위 element는</p>
{children}
</div>
)
}
</script>· Component 의 Attribute 에 해당
· Component 안에 작성된 하위 element 를 children 이라고 하며, props 중 하나
· Props 는 "읽기 전용"
👉 props 로 넘겨받은 값은 Component 내에서 변경 지양 ( 변경해도 react 에서 감지 X )
State
const { data, setData } = userState(null)· useState의 입력값은 state 의 초기 값
· useState의 첫번째 원소는 state의 값이고, 두번째 원소는 그 값을 바꾸는 함
· useState의 두번째 원소인 함수를 실행하면 그 state가 속해있는 Component가 다시 실행( Re-rendering )
· Component 내에서 변하는 값을 다루기 위해 사용 ( = 변수 )
👉 "State" 를 통해 데이터를 유동적으로 관리
· State 가 변경될 때마다 Component 가 다시 렌더링 ( Re-rendering )
👉 State 변경 방법
- Callback 함수 :
setData( data => data +1 )
- Callback 함수 :
- 직접 변경 :
setData( data +1 )
- 직접 변경 :
Hook
· Class Component 의 React 를 "Function Component" 로 변경하기 위해 도입
· 함수와 동일한 역할 ( 앞에 use를 붙임 )
대표적인 Hook
⚪ useState
· Component 내의 동적 데이터 관리
⚪ useEffect
· First Rendering 이후, 어떤 값이 변경되었을 때, 특정 함수를 실행
Re-rendering 시 사용
⚪ useMemo
· 지정한 State 나 Props 가 변경될 경우, 해당된 값을 계산하여 Memoization 후, Re-rendering 시 불필요한 연산을 줄여줌.
⚪ useCallback
· *useMemo 와 동일하며, 지정 대상이 Function
⚪ useRef**
· 변경되어도 Re-rendering 을 원하지 않을 때, DOM 요소에 접근하고 싶을 때
⚪ Web 이 Re-render 되는 경우
· 1. State 의 변경
· 2. 물려받은 Props 가 변경
· 3. 부모의 State가 변경됐을 때, 자식 State( Children )가 모두 Re-rendering
JSX
· 함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 JavaScript 의 확장
· HTML 과 비슷하게 생겼으나 JavaScript 이고, HTML 과 다른 부분이 있음
👉 JSX 는 Babel 에 의해 Transcompile 됨
JSX 장점
· 개발자 편의성 향상
· 협업에 용이 / 생산성 향상
· 문법 오류와 코드량 감소
JSX 특징 ( HTML 과 차이점 )
· HTML 태그 내에서 JavaScript 연산
· class 👉 className
· 스타일은 object(객체) 로, 속성값은 camelCase 로 작성
· 모든 태그는 닫는 태그가 필수
· 최상위 element 는 반드시 하나
React 생성, 배포
✔ 시작 도우미 사이트 : https://create-react-app.dev
npx create-react-app .
npx create-react-app <directory>
⚪ CRA ( Create React App )
· 현재 디렉토리( . ) 에 react 실행 환경 생성
· 또는 <directroy> 라는 이름의 새 폴더를 생성하고, 그 안에 react 실행 환경 생성
npm run build
· src 와 public 을 합하고 불필요한 요소와 파일들을 제외한 뒤, "배포"를 위한 build 폴더를 생성
npx netlify-cli deploy -d build --prod
· Netlyfy 서버에 build 폴더의 배포판을 업로드
👉 package.json 파일에 명령어 등록하여 간소화 가능
"deploy" : "npm run build; npx netlify-cli deploy -d build --prod"
CRA란
· React 프로젝트를 손쉽게 생성할 수 있도록 도와주는 "보일러플레이트 ( BoilerPlate )"
· 수많은 React 용 보일러플레이트가 있지만, Facebook 에서 직접 만드어서 관리하는 Create React App 이 가장 많이 쓰임
· 프로젝트 생성에 필요한 다양한 가능을 Command 로 제공함
CRA 장점
⚪ 개발자가 온전히 React App 개발에 집중할 수 있도록 함
· 상대적으로 덜 중요한 코드는 노출되지 않음
· 강력한 Command 지원
⚪ (대부분의) 모든 브라우저에서 해석될 수 있도록 TransCompile 지원
· Babel
· 배포 시 코드 번들링
· Webpack
