개인 공부 정리

리액트 정리 1(24/05/03)

티들 2024. 5. 3. 21:55

리액트에 관해서

리액트는 다양한 곳에서 사용을 하는 만큼 기업에서도 자주 사용하는

기술 중 하나이다.

리액트와 비슷한 라이브러리는 Vue, Svelte, Preact, SolidJS 등이 있다.

그래서 이제부터 소개 하는 내용은 리액트에 관한 내용의 정리이다.

리액트의 특징

- 컴포넌트 기반의 UI 자바스크립트 라이브러리

- SPA(Single Page Application)를 쉽고 빠르게 만들수 있도록 해주는 도구

※ MPA는 페이지를 여러개 만들어야 하지만 SPA는 페이지는 하나 콘텐츠 여러개로 만든다.

 

리액트 18에서 달라진점

  1. 상태 업데이트(setState)를 하나로 통합해서 배치처리를 하고 리렌더링을 진행함
  2. 리렌더링 관련 성능 개선
  3. 자동 배치를 수행하여 마지막에 한 번만 렌더링 가능하게 함
  4. 새로운 훅을 지원
  5. 함수형 컴포넌트 사용 권장
  6. 웹팩(CRA) 대신 vite 사용

JSX의 기본 규칙

JSX란?

-자바 스크립트와 XML/HTML을 함께 사용할 수 있는 자바스크립트의 확장문법

 

JSX의 기본 규칙은 다음과 같다.

  1. Component는 하나의 부모 요소로 감싸져야 함
  2. JS 표현식(변수)를 쓰려면 { }로 감싸주어야 함
  3. 인라인 스타일링은 camelCase로 작성 ex)backgroundColor
  4. class 대신 className
  5. HTML Element를 꼭 닫아주어야 함 ex) <input />, <br />
  6. 주석은 {/* 내용 */} 형태로 써야함 (//로는 주석 처리 불가)
  7. style={{속성: 값}} 으로 써야함
  8. if 대신 삼항연산자를 많이 씀 ex) boolean ? <p/> : null
  9. &&, || 연산자를 이용한 조건부 렌더링
  10. 요소를 ()로 감싸 변수에 저장할 수 있음
const A = true;

const myElement = (
	<h2>제목</h2>
    <br />
    {const && <p>테스트</p>}
    {/* 주석 */}
);

 

 

리액트에서의 렌더링

- 리액트내에서 화면 업데이트 단계

  1. 렌더링 유발
  2. 렌더링 : 컴포넌트 호출
  3. 실제 DOM 커밋 : 변화된 컴포넌트만 커밋
  4. 브라우저 리페이팅

- 렌더링은 리액트가 컴포넌트들을 호출하는 것

- 초기 렌더링에서는 root 컴포넌트를 호출

- 후속 렌더링에서는 state 업데이트를 유발한 해당 함수 컴포넌트를 호출

 

Props의 개념과 특징

- 개념 : 리액트 컴포넌트의 속성

- 특징-

1. "읽기 전용"으로 부모가 자식에게 전달

2. 리액트 컴포넌트의 props는 바꿀 수 없고, 같은 props가 들어오면 항상 같은 엘리먼트 리턴

Props 사용법

- 컴포넌트에 속성이름 = {값} 형태로 넣어 주면 됨. 다음과 같은 형식으로 사용함

<Message name={"OOO"} comment={"안녕"}/>

 

 

Hook이란?

개념

함수형 컴포넌트에서 컴포넌트의 상태(state)와 컴포넌트 생명주기의 원하는 시점에 정해진 함수를 실행되도록 만든것

규칙

  1. 훅은 무조건 컴포넌트 내의 최상위 레벨에서만 호출해야 함
  2. 제어문 내에서 호출하면 안됨
  3. 컴포넌트 밖의 자바스크립트 함수에서 호출 불가함
  4. 컴포넌트 내부요소의 상태변화 감지가 목적

종류

useState(), useEffect(), useMemo(). useCallback(), useRef()

 

useState()의 사용법과 예시

- 함수 컴포넌트에서 변수(State)를 사용하기 위한 훅

사용법 : const [변수명, set함수명] = useState(초기값);

const [count, setCount] = useState(0);
const [text, setText] = useState("");

 

함수를 이용하여 컴포넌트 작성하는 2가지 문법

첫번째: 함수로 만들기

function 컴포넌트 이름() {
	...내용
    return (요소);
}

두번째 : 화살표 함수
const 컴포넌트 이름 = () => {
	...내용
    return (요소);
}

export default 컴포넌트 이름;

 

Map과 filter 메소드에 대해서

- 문법

map 메서드의 문법
Arr.map((item) => <요소>{item}</요소>);

filter 메서드의 문법
Arr.filter((item, index) => 조건);

 

장점

- map : JS 배열을 map 메서드를 사용하여 각 요소를 가져올수 있음

- filter : JS 배열을 filter 메서드를 사용하여 조건에 따라 배열을 변경 가능 함

 

input 데이터를 useState를 사용해 출력

const [input, setInput] = state("");

return (
	<div>
    	<input onChange={(e) => {
        	setInput(e.target.value)
            console.log(input)
        }} />
    </div>
)

간단하게 입력을 하면 즉시 그 input 창에 있는 텍스트를 콘솔에 출력하는 코드이다.

 

조건부 렌더링

조건부 렌더링이란 조건에 따라 렌더링의 결과가 달라지도록 하는 것

대표적인 2가지는

1. 조건&&<컴포넌트 />  (조건이 참이면컴포넌트 렌더링)

2. 조건? <컴포넌트1 /> : <컴포넌트2 /> (조건이 참이면 컴포넌트1 거짓이면 컴포넌트 2가 렌더링)

예시 코드

const Text = "안녕하세요"
const TF = true;

return (
	{/* && 연산자 */}
    {Text.length > 0 && <div>안녕하세요</div>}
    
    {/* 삼항연산자 */}
    {TF ? <div>참</div> : <div>거짓</div>}
);

같은 예시가 있다