2022-10-05 노션페이지
2022-10-06 노션페이지
2023-05-11 노션페이지
React
- React는 프레임워크가 아닌 라이브러리이다
- 프레임워크: 필요한 기능이 대부분 틀로 만들어져 있어 사용하게 된다
- 라이브러리: 내가 필요한 기능만 꺼내어 사용한다
- React의 발상
- 리액트는 어떠한 상태가 바뀌었을때, 처음부터 모든걸 새로 만들어서 보여주자는 아이디어에서 시작
- 문제점 : 속도가 느려질 것
- 해결방법 : VirtualDOM을 사용한다
- VirtualDOM은 JS의 객체로 가상의 DOM으로 기존의 DOM과 비교해 변경된 부분을 찾아 그 부분만 반영한다
리액트의 장,단점
장점
- 다른 프레임워크와 라이브러리와 혼용가능
- 페이스북이 꾸준히 업데이트한다
- 서버&클라이언트렌더링을 지원한다.
- 서버렌더링을 지원함으로써 (초기구동 딜레이 & SEO (검색엔진최적화))
- 초기 렌더링 시 클라이어트렌더링만 할 땐 JS가 렌더링 되기 전 딜레이가 발생하나 서버렌더링을 통해 먼저 html을 생성을 하고 문자의 형태로 브라우저에 띄워줌
- 검색엔진 최적화
단점
- 보이는 UI 부분만 관여한다
- ES8 이하는 지원하지 않음
render함수
초기렌더링
- 맨 처음 어떻게 보일지를 정하는 초기 렌던링을 다루는 render함수
render( ){ … }- 이 함수는 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환
- 이때 render함수를 실행하면 그 내부에 있는 컴포넌트들도 재귀적으로 렌더링
- 컴포넌트를 실제 페이지에 렌더링할 때는 분리된 두가지 절차
- 정보들을 사용하여 HTML마크업을 만듦
- 정하는 실제 페이지의 DOM 요소 안에 주입
조화과정
- 리액트에서 뷰를 업데이트 할 때 ‘조화 과정을 거친다’라고 하는 것이 더 정확한 표현
- 컴포넌트에서 데이터 변화가 있을 때, 뷰가 변형되는 것처럼 보이지만, 사실은 새로운 요소로 갈아 끼우는 것
- 이때 이전에 render함수가 만들었던 컴포넌트 정보와 현재 render함수가 만든 컴포넌트 정보를 비교한다
(VirtualDOM)
JSX
JSX는 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼습니다.
바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다.
// JSX function App() { return ( <div> Hello <b>react</b> </div> ); } //----------------------------- // 바벨 사용 후 변환된 코드 function App() { return React.createElement("div", null, "Hello ", React.createElement("b", null, "react")); }규칙
- 반드시 부모 요소 하나로 감싸야 한다
- Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교하기 위해
- If 문 대신 조건부 연산자 (삼항연산자)
- AND 연산자(&&)를 사용한 조건부 렌더링
return <div>{name === '리액트' && <h1>리액트입니다.</h1>}</div>;- 원하는 값일 때만 표현하게
const number = 0;return number && <div>내용</div>- 여기서 한 가지 주의해야 할 점이 있는데요. falsy한 값인 0은 예외적으로 화면에 나타난다는 것입니다.
- undefined를 렌더링하지 않기
- 오류 발생
- JSX 내부에서 undefined를 렌더링하는 것은 괜찮습니다.
function App() { const name = undefined; return <div>{name}</div>; }- 꼭 닫아야 하는 태그
<br>,<input>태그들은 html에서 닫지 않아도 잘동작했지만, 리액트에선 꼭 태그들을 닫아야 함- JSX에서 주석
{/* 멀티라인으로 사용하고 표현식으로 묶기 */}- 태그 안에 프롭의 주석을 남기고 싶을 때
<div id = 3 // 주석입니다 ></div>
참조: 벨로퍼트와 함께하는 모던 리액트, 리액트를 다루는 기술[개정판]
