React
1.[React] JSX란?
A systax extension to JavaScriptJavaScript + XML/HTMLReact의 createElement(): JSX 코드를 JS코드로 변환하는 것JSX 이용OJSX 이용XJSX 이용OJSX 이용X위에서 말했듯이 React.createElem
2.[React] Rendering Elements
Elements : 화면에서 보이는 것들을 기술 : 리액트 앱을 구성하는 가장 작은 블록들 ✔️React Element vs Dom Element 아래의 사진을 봤을 때, 오른쪽에 나와있는 Elements들은 Dom Element를 의미한다. 즉, 우리가 실제 화면
3.[React] Components, Props
React: Component-based 리액트에서는 모든 페이지가 컴포넌트로 구성되어있으며, 하나의 컴포넌트는 또 여러개의 컴포넌트의 조합으로 이루어질 수 있다. React Component 입력: Props 출력: react element 이렇게 어떠한 속성들(p
4.[React] State, Lifecycle
State >- 리액트 Component의 상태(데이터) / 변경 가능한 데이터 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야함 이유: state값이 변경될 경우, component값이 재렌더링 되기때문에, 불필요한 값이 들어가면 불필요한 경우에 co
5.[React] React Router 사용하기, useParams()
사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것React는 SPA 방식이다. MPA 방식처럼 새로운 페이지를 로드하는 방식이 아님새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 가짐React-Router: 신규
6.[React] Firebase를 통해 회원가입, 로그인, 로그아웃 기능 구현
Firebase에 대해 간단한 개념을 우선 정리해보자.Firebase : 실시간 DB, 인증, 스토리지, 분석 등 다양한 기능을 제공하는 모바일/웹앱 개발 플랫폼1) Authentication: 간편한 다중 플랫폼 로그인 \- 이메일 인증, 소셜미디어 계정 인증, 전화
7.[React] Recoil로 상태관리하기_atom, selector
react로 개발을 하다보면, 점점 상태관리를 하는 코드가 늘어나기 마련이다. 특히 useState를 난무하는 경우가 발생하며, react의 특성 중 하나인 ‘단방향 데이터 흐름’으로 인해 useState로 상태가 변경된 값을 props를 특정 컴포넌트로 계속 전달 →