오늘 공부한 내용 💻
- React 소개
- create-react-app, JSX
- 컴포넌트
- 분기와 반복
- 상태와 이벤트 바인딩
- useEffect
- useRef
- 페이지네이션
리액트(React)란?
- 페이스북에서 2013년 오픈 소스로 공개한 프론트엔드 라이브러리
- 리액트라는 이름은 Reactive programming에서 따왔다고 한다.
- 반응형 프로그래밍을 통해 리액트는 상태를 관찰하고 변화가 발생할 경우 연관된 곳에서 연산이 수행된다.
create-react-app, JSX
-
create-react-app
리액트로 어플리케이션을 만드는 가장 빠른 방법으로, 웹팹 등의 빌드 설정을 하지 않아도 된다는 장점이 있다.
yarn create-react-app projectName-
JSX
JSX는 Javascript에 XML을 추가한 문법이다.
HTML속성들의 이름을 카멜케이스로 사용한다.
ex) class => className최상위 요소는 한 개여야 한다 !
const element = (
<div>
<h1>Hello!</h1>
<h2>React</h2>
</div>
);위와 같은 방식으로 div 태그를 사용하여 하나로 묶어주는 방법도 있고
const element = (
<>
<h1>Hello!</h1>
<h2>React</h2>
</>
);
의미없는 태그가 추가되는게 싫다면 Fragment(<>)를 사용하면 된다.
컴포넌트
-
리액트 에서는 화면을 컴포넌트 단위로 나누어서 구성한다.
-
재사용성을 높이기 위해 UI를 추상적으로 바라보는 시각이 필요하다.
-
리액트의 컴포넌트를 함수라고 할 수 있는데, 데이터를 전달하기 위해 props라는 객체를 박아 함수 내의 로직을 거쳐 JSX를 반환한다.
분기와 반복
JSX에서는 if, for문과 같은 반복문의 사용이 어렵기 때문에 조건문을 구현하기 위해 삼항 연산자, 논리 연산자를 사용하고 map, filter 을 사용한다.
상태
컴포넌트 내에서 상태를 관리하기 위해 useState를 사용한다.
import React, { usestate } from 'react';
const [number, setNumber] = useState(0);useState를 호출하면 배열을 반환하게 된다.
첫 번째 원소는 현재 상태의 값을 가지고 있는 변수이고, 두 번째 원소는 상태 값을 변경해주는 함수이다.
useState 괄호 안의 값은 state의 초기값 이다.
useEffect
상태에 변화가 생겼을 때 그 변화를 감지하여 반응하는 훅(Hook)이다.
useEffect(() => {
}, [])라이프 사이클처럼 사용이 가능하고, 두 번째 파라미터에 빈 배열을 넣으면 컴포넌트가 로드 되었을 때 실행된다.
어려웠던 내용 🤢
useRef
useRef는 렌더링을 하지 않으면서 컴포넌트의 속성만 조회 / 수정하는 리액트 훅이다.
다음과 같은 경우 useRef를 사용한다.
1. DOM에 직접 접근하기 위해
const inputRef = React.useRef();
return (
<>
<input ref={inputRef}/>
<button onClick={() => inputRef.current.focus()}>클릭</button>
</>2. 지역변수로 사용하기 위해
useState는 값이 변경되면 렌더링이 되는데 useRef는 값이 변경 되더라도 렌더링이 되지 않는다는 차이가 있기 때문에 이 점을 사용한다.
느낀점 👀
간만에 ,,, TIL 😂
한 2주동안 엄청난 슬럼프를 경험하고 TIL은 그냥 쓰지 말까 생각도 했었지만 ,,,
그동안 써왔던게 아깝기도 하고 ㅜㅜ 공부한 내용 기록하는것이 매우 도움이 되었다는걸 알기 때문에 ,,, 너무 강박 가지지 말고 써나가기로 결정했다 ㅎㅎ
암튼 오늘은 리액트 첫 수업 !!
리액트는 혼자 공부 했었는데 항상 기초가 부족하다는 생각을 가지고 있었다.
이번 기회에 기초부터 제대로 공부해서 앞으로 있을 프로젝트도 잘 할 수 있으면 좋겠따.
화이팅 ...
