48일차 배운 것 정리

목차

1. React 소개

1. React 개요

1-1. 특징

• 왜 React 일까?
• Reactive Programming 반응형 프로그래밍
• 엑셀, 스프레드 시트의 계산(B4 + A3)
• ↔ 명령형 프로그래밍

• MVC 패턴 중 V (View) 만을 컴포넌트를 통해 관리
• 컴포넌트
• 재사용 가능한 독립적인 객체
• 런타임 시점에 사용
• 미리 만들어두고, 런타임에 조립하듯이 사용
• HTML + Style + JavaScript + Event + State 의 결합체
• 컴포넌트 끼리 관계를 맺으며, 트리구조로 형성

• VirtualDom

코드로 DOM 트리를 표현한 것

• 필요한 부분만 한 번에 렌더링 한다.
• 주의 직접 DOM을 조작하는 것 보다 성능이 빠르지 않다.
• 다만 실제 case에서 사용하기에 충분히 빠르다는 것
• 성능보다는 개발의 편리성을 위해 도입했다고 할 수 있다.
• 성능최적화를 정말 빡세게한 js > 일반 virtualDOM > 성능관리 안한 js

1-2. 리액트는 어떻게 공부해야할까?

• 첫 출발은 컴포넌트에 포커스를 맞추어 보기
• 처음부터 재사용성과 확장성을 고려하는 것 쉽지 않다.
• 눈에 보이는 UI 부터 시작하여, UI를 추상적으로 바라보는 법 배우기

• 많이 보는 것보다 많이 치는 것이 중요하다.

2. CRA와 JSX

2-1. CRA

• 설치 $npx create-react-app

2-2. JSX

JS내에서 가상돔을 조금 더 편하게 만들기 위한 React만의 문법

• HTML 형식과 유사하도록 작성
• JS : React.createElement(”’div”, {className:’App’})
• JSX : <div className=”App”> </div>

• 주의 최상위 요소는 반드시 1개여야함
• React에서 가상돔을 최적화하기 위한 방법
• <>, </> fragment로 감싸주면 실제 DOM에 렌더링 되지 않고 감쌀 수 있다.

• 표현식을 사용하기 위해서는 중괄호 처리
• {name}
• {isShow && <img src=”www.naver.com” />}
• {name === ‘outwater’ ? <h1>Welcome</h1> : <h1>Error !!</h1>}

3. 컴포넌트

3-1. UI를 추상적으로 사용/생각하기

• UI들의 공통점을 찾는 것이 재사용의 시작이다.
• Icon + Text 형식의 JSX로 넘기는 방식을 떠올릴 수 있다.

• 컴포넌트의 분류
• 너무 깊이 고민하지 말고, 점차 규칙을 정하는 것!
• 보통 팀에 의해 하나의 규칙이 적용됨
React 홈페이지의 FAQ



• Domain을 기준으로 분류하기
• 역할로 분류하기
• Header, List, … ,
• 크기로 분류하기
• Atomic 디자인

• 리액트에서 컴포넌트는 “함수”다.
• props를 받아서 JSX를 반환하는 함수

4. 분기와 반복

4.1 리액트에서의 분기 처리

• 논리곱 연산자 사용
• visible && <h1>Can See Content</h1>

• 삼항연산자 사용
• visible ? <h1>Can See Content</h1> : null

4.2 리액트에서의 반복처리

• map을 통해 배열형태로 만들어 JSX를 반복처리할 수 있다.
• 반복시에는 성능최적화를 위해 고유한 값을 key로 설정해주어야 한다.

5. UseEffect와 UseRef

5-1. UseEffect

• 사용사례1
• reactive한 프로그래밍을 하여

• 사용사례2
• 전역에 대한 이벤트를 등록할 때,
• 반드시 제거처리를 해주어야홤
• useEffect내부에서 함수를 리턴할 경우 제거 처리 가능

5-2 useRef

• 1) DOM에 직접 접근할 때 사용
• useRef() 로 변수에 할당한다음, jsx에서 ref속성으로 연결하여 준다
• const inputRef = useRef(); <input ref={inputRef} />;
• 컴포넌트 외부에서 ref를 받아 동적으로 주입하는 것도 가능 (공식문서)
• React.forwardRef

Ref 전달하기는 일부 컴포넌트가 수신한 ref를 받아 조금 더 아래로 전달(즉, “전송”)할 수 있는 옵트인 기능입니다.

• 첫번째 인자로 props를 두번째 인자로 ref를 받아, 하위 컴포넌트로 넘겨줄 수 있다.

• 2) 지역변수로 사용할 때 사용
• useState와 다른 점
• useState는 값이 변경될 때, 렌더링을 다시한다.
• useRef 사용 시 변경되어도, 리렌더링을 하지 않느다.
• 렌더링에 관계없는 값을 관리할 때 사용