[React] 엘리먼트 렌더링
2022. 10. 6. 20:13
프로그래밍/React
엘리먼트 렌더링 엘리먼트는 React 앱의 가장 작은 단위 엘리먼트는 화면에 표시할 내용을 기술 const element = Hello, world; 브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체이며(plain object) 쉽게 생성할 수 있음 React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트함 주의 더 널리 알려진 개념인 “컴포넌트”와 엘리먼트를 혼동할 수 있음 엘리먼트는 컴포넌트의 “구성 요소”임 DOM에 엘리먼트 렌더링하기 HTML 파일 어딘가에 가 있다고 가정해보자 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 “루트(root)” DOM 노드라고 부름 React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있음..
[React] JSX란?
2022. 10. 5. 20:02
프로그래밍/React
아래 변수 선언을 살펴보자 const element = Hello, world!; 이 문법은 문자열도, HTML도 아닌 JSX이며 JavaScript를 확장한 문법임 UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것을 권장함 JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, JavaScript의 모든 기능이 포함되어 있음 JSX는 React “엘리먼트(element)” 를 생성함 JSX란? React에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다는 사실을 받아들임 React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “..
Redux-saga 사용 이유
2021. 6. 4. 20:10
프로그래밍/React
Redux-saga 사용 이유 Redux-saga는 비동기적 명령을 내릴 수 있기에 사용함 Redux는 동기적으로 실행(바로 실행)되기 때문에 비동기적 명령을 내릴 수 없음 주로 서버에 비동기 요청을 할 때 컴포넌트에서 요청하지 않고 Saga에서 모아서 관리가 가능함 saga는 이터레이터(iterator)의 next 메서드를 이펙트에 따라 알아서 해주는 제너레이터(generator)임
SSR이 적용됐는지 확인하는 방법
2021. 5. 31. 20:18
프로그래밍/React
SSR이 적용됐는지 확인하는 방법 1️⃣ 서버를 켠 후 브라우저에서 localhost:3000 입력(자신이 설정한 주소 입력) 2️⃣ 개발자도구에서 javascript 꺼버리기 Settings 👉 Preferences 👉 Debugger 👉 Disable JavaScript 3️⃣ 새로고침하면 ssr 적용됨(css도 ssr이 적용됐는지 확인 가능함)
SWR
2021. 5. 28. 20:36
프로그래밍/React
get요청 간단하게 해주는 next의 라이브러리 로드할때 편리하기때문에 사용하는것 권장 서버사이드랜더링도 가능 사용방법 👇 1️⃣ 터미널에 swr 설치 npm i swr 2️⃣ swr 사용할 페이지에 import import sueSWR from 'swr'; 3️⃣ 사용하기 const fetcher = (url) => axios.get(url, { withCredentials: true }).then((result) => result.data);
정적라우팅(Static Routing)과 동적라우팅(Dynamic Routing)
2021. 5. 27. 20:05
프로그래밍/React
Next와 정정라우팅&동적라우팅 Next.js는 파일 시스템 기반 정적라우팅(Static Routing)과 동적라우팅(Dynamic Routing)을 지원함 정적라우팅은 직접 경로를 일일히 설정을 해주는 것이고 동적라우팅은 한번 설정 해주면 라우팅 프로토콜을 통해 알아서 계산되어 경로가 정해짐 Next.js를 npm 명령어를 통해 CLI로 프로젝트를 구성해보면 'pages'라는 폴더가 생김 이 pages 폴더에 라우팅 하고 싶은 이름으로된 .js(.jsx 또는 Typescript를 사용한다면 .tsx) 파일을 만들어줌 그 후 Next.js에서 지원하는 useRouter 함수나 Link 컴포넌트를 통해 만들어준 .js의 이름을 경로로 설정해 주면 됨 정적 라우팅(Static Rourting) 정적 라우팅은..
styled-components로 ant design 컴포넌트 css 오버라이딩
2021. 5. 11. 20:32
프로그래밍/React
antd 설치 및 사용법 👇 carpet-part1.tistory.com/327 styled-components 설치 npm i styled-components antd css 오버라이딩 할 컴포넌트에 import import styled from 'styled-components'; styled-component 사용법 import React from 'react'; import styled from 'styled-components'; import { Button } from 'antd'; const ButtonWrapper = styled(Button)` background: green; :hover { background: green; } `; const antdForm = () => { retu..
Ant Design 사용 방법
2021. 5. 10. 20:01
프로그래밍/React
💡 Ant Design 설치하기 npm i antd 💡 css 적용을 위해 공통 컴포넌트에 'antd/dist/antd.css' import 하기 // pages/_app.js import 'antd/dist/antd.css'; 💡 Ant Design 사용하기 1️⃣ 필요한 컴포넌트 import // components/AppLayout.js import { Menu } from 'antd'; 2️⃣ 컴포넌트 사용 // components/AppLayout.js import React from 'react'; import { Menu } from 'antd'; const AppLayout = () => { return ( 메뉴1 메뉴2 ); }; export default AppLayout; 3️⃣ An..