React Orientation
1. react의 특징
react란?
- Facebook에서 만든 Javascript 사용자인터페이스(UI) 라이브러리이다.
- React.js, React 둘다 혼용하며, 다른 라이브러리들과 함께 사용할 수 있어 효율적인 라이브러리라고 할 수 있다.
- React 자체는 framework라 부를 수 있는 기준인 라우팅, 상태관리 기본 제공을 충족하지 못하기에 '라이브러리'이지만, React의 생태계는 framework이다.
- SPA(Single Page Application)를 쉽고 빠르게 만들 수 있도록 해주는 도구이다.
특징
- 가상 DOM (Virtual DOM) 사용으로 필요한 요소만 빠르게 업데이트
- 반복되는 요소를 Componenet화
- 활발한 지식공유와 커뮤니티
- 리엑트 네이티브를 통한 모바일 앱 개발 가능
- 단방향 데이터 흐름
리엑트는 데이터의 흐름을 단방향으로 유지
단점
- 방대한 학습량
- 높은 상태 관리 복잡도
2. React 18 Update후 달라진 점
- 함수형 컴포넌트 사용 권장
- 웹팩(CRA) 대신 vite 사용
3. JSX
JSX란
- 자바스크립트와 XML/HTML을 함께 사용할 수 있는 자바스크립트의 확장문법
JSX의 역할
- JSX로 작성된 코드는 모두 자바스크립트 코드로 변환
- 리엑트는 JS코드를 모두 createElemnt() 함수를 사용하는 코드로 변환
JSX의 장점
- 코드가 간결해지고 가독성 향상(JS문법 사용)
- Injection Attack을 방어함으로써 보안성이 올라감
JSX 기본규칙
import React from 'react';
import Hi from './Hi';
function App(){
const age = 18;
return(
<>
<Hi /> /*1. Component는 하나의 부모 요소로 감싸져야 함*/
/*2. js 표현식(변수)를 쓰려면 {}로 감싸주어야 함*/
/*5. HTML Element를 꼭 닫아주어야 함*/
<div className="age">{age}</div>
/*3. 인라인 스타일링은 camelCase로 작성*/
/*4. class대신 `className`*/
/*7. style={{속성: 값}}`*/
/*{/*주석형태*/}*/
<div style={{backgroundColor: 'pink'}}</div>
</>
props와 state
props
개념 : 리엑트 컴포넌트의 속성
특징
- 읽기 전용으로 부모가 자식에게 전달
- 리엑트 컴포넌트의 props는 바꿀 수 없고, 같은 props가 들어오면 항상 같은 엘리먼트를 리턴
import ReactDOM from "react-dom";
function Hello(props) {
return (
<main>
<h1>Hello {props.user} World!</h1>
<h3>{props.count}번째 방문입니다.</h3>
</main>
);
}
const rootElement = document.getElementById("root");
const root = ReactDOM.createRoot(rootElement);
root.render(<Hello user="소마고" count={3} />);Hook
개념 : hook은 함수형 컴포넌트가 클래스형 기능을 사용할 수 있도록 해주는 기능이다.
규칙
1. 최상위에서만 Hook을 호출
React 함수(컴포넌트)의 최상위에서만 Hook을 호출 할 것.
반복문, 조건문, 중첩된 함수등에서 호출 X
2. React 함수에서만 Hook을 호출
Custom Hook에서는 호출 가능
일반적인 Javascript 함수에서는 호출 X
3. Hook을 만들때 앞에 use 붙히기
그래야만 한눈에 보아도 Hook 규칙이 적용되는지를 파악할 수 있기 때문 (공홈)
4. React는 Hook 호출되는 순서에 의존
한 컴포넌트에서 여러개의 hook이 사용되는 경우
hook은 위에서부터 아래로 순서에 맞게 동작한다.
종류
기본 hook
- useState (동적 상태 관리)
- useEffect (side effect 수행 -mount/unmount/update)
- useContext (컴포넌트를 중첩하지 않고도 전역 값 쉽게 관리)
추가 hook
- useReducer (복잡한 컴포넌트들의 state를 관리 -분리)
- useCallback (특정 함수 재사용)
- useMemo (연산한 값 재사용)
- useRef (DOM선택, 컴포넌트 안에서 조회/수정할 수 있는 변수 관리)
- useImperativeHandle
- useLayoutEffect
- useDebugValue
useState
- 컴포넌트 상태를 간편하게 생성하고 업데이트 해주는 도구를 제공
state 생성과 동시에 가져야할 초기값을 useState함수에 인자로 넣어주면 state와 setState를 두가지 요소를 배열 형태로 리턴해준다.
const [state, setState] = useState(초기값);컴포넌트의 현재 상태 갑은 state라는 변수에 들어있고 state를 변경하고 싶으면 setState함수를 이용해서 변경할 수 있다.
import React, { useState } from 'react';
function Plus() {
const [number, setNumber] = useState(0);
const onIncrease = () => {
setNumber(prevNumber => prevNumber + 1);
}
const onDecrease = () => {
setNumber(prevNumber => prevNumber - 1);
}
return (
<div>
<h1>{number}</h1>
<button onClick={onIncrease}>+1</button>
<button onClick={onDecrease}>-1</button>
</div>
);
}
export default Counter;함수형 컴포넌트
- 함수 선언식 스타일
import React from "react";
function App() {
return <div>Hi, siyeon</div>;
}
export default App;- 화살표 함수 스타일
import React from "react";
const App = () => {
return <div>Hi, siyeon</div>;
};
export default App;Array.map, filter
Array.map()
arr.map((item) => {return <요소>{item}</요소>})
// 한줄 요소인 경우 return과 {} 동시에 생략가능- 콜백함수를 이용해 각각의 요소에 호출해서 그 값을 변환할 수 있게 해줌
- 콜백함수는 배열의 각 요소에 실행됨
Array.filter()
사용법
배열.filter(function(curretValue, index, arr), thisValue);조건부 렌더랑과 input
리엑트에서 입력한 input 데이터를 useState를 사용하여 가져온 후 출력하는 예제
import React, { useState } from 'react';
function InputExample() {
// useState를 사용하여 input 값의 상태를 관리한다.
const [inputValue, setInputValue] = useState('');
// input 값이 변경될 때마다 상태를 업데이트하는 함수를 정의한다.
const handleInputChange = (event) => {
setInputValue(event.target.value);
};
return (
<div>
{/* input 요소를 렌더링하고 onChange 이벤트 핸들러를 연결한다. */}
<input
type="text"
value={inputValue}
onChange={handleInputChange}
/>
{/* 입력한 데이터를 출력합니다. */}
<p>입력한 값: {inputValue}</p>
</div>
);
}
export default InputExample;
조건부 렌더링
- 조건에 따라 렌더링의 결과가 달라지도록 하는 것
엘리먼트 변수
- 리엑트 엘리먼트를 변수처럼 저장해서 사용하는 방법
let 변수 = <컴포넌트 />```
인라인조건
- 조건문을 코드 안에 집어넣는 것
- 인라인 if
- if문을 필요한 곳에 직접 넣어서 사용하는 방법- 논리 연산자 &&를 사용(AND 연산)
- 앞에 나오는 조건문이 true일 경우에만 뒤에 나오는 엘리먼트를 렌더링
참 && 표현식 -> 표현식,거짓 && 표현식 -> 거짓
인라인 If-else
- if-esle문을 필요한 곳에 직접 집어넣어서 사용하는 방법
- 삼항연산자 ?를 사용
조건? <컴포넌트1/>:<컴포넌트2 /> //조건이 참이면 컴포넌트1이 렌더링, 거짓이면 컴포넌트 2가 렌더링- 조건에 따라 각기 다른 엘리먼트를 렌더링하고 싶을 때 사용
컴포넌트 렌더링 막기
- 리엑트에서는 null을 리턴하면 렌더링되지 않음
- 특정 컴포넌트를 렌더링하고 싶지 않을 경우 null을 리턴하면 됨.
조건? <컴포넌트> : null //조건이 거짓이면 컴포넌트 렌더링 안됨
```jsx
import { useState } from "react";
import "./style.css";
export default function ConditionR() {
const [login, setLogin] = useState(false);
return (
<div>
<div className="wrapp">
{login && <span className="greeting">환영합니다~</span>}
{login ? (
<button className="btn" onClick={() => setLogin(false)}>
로그아웃
</button>
) : (
<button className="btn" onClick={() => setLogin(true)}>
로그인
</button>
)}
</div>
<hr />
<div style={{ paddingTop: "8px" }}>모두함께 리엑트 공부</div>
</div>
);
}
Frontend Developer