본문 바로가기

라이브러리/React

 (9)
JSX의 개념과 문법 import logo from "./logo.svg"; import "./App.css"; function App() { return ( Edit src/App.js and save to reload. Learn React ); } export default App; 리액트를 이제 사용하기 시작하는 분들이라면 이런 코드가 낯설 수 있습니다. 이런 코드는 JSX라고 하며 자바스크립트 (이하 JS)의 확장 문법으로 XML과 매우 비슷한 모양을 하고 있습니다. 이 JSX는 끝까지 이 형태가 유지되는 것이 아니라 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 JS 형태의 코드로 변환됩니다. (바벨은 코드를 변환하여 크로스 브라우징을 가능하게 해주는 트랜스 파일러) 자, 그러면 JSX..
React란 한때, 자바스크립트 (이하 JS)는 웹 브라우저에서 간단한 연산을 하거나 시각적인 효과를 주는 단순한 스크립트 언어에 불과했지만, 현재는 웹 어플리케이션에서 가장 핵심적인 역할을 수행하고 있습니다. 나아가 브라우저뿐만 아니라 모바일, 데스크톱 어플리케이션에서도 널리 쓰이고 있습니다. 우리가 보통 사용하는 웹 아키텍처는 흔히 들을 수 있는 MVC (Model View Controller), MVVM (Model View View Model), MVW (Model View Whatever) 패턴 등이 있습니다. 모델은 어플리케이션에서 사용하는 데이터를 관리하는 영역이고, 뷰는 사용자에게 보이는 부분입니다. 컨트롤러는 사용자에게서 요청이 들어오면 모델 데이터를 조회하거나 수정하여 변경 사항을 뷰에 반영합니다...
React-slick으로 슬라이드 만들기 일단, npm 혹은 yarn으로 react-slick과 slick-carousel을 설치합니다. npm install react-slick, npm install slick-carousel 혹은 yarn add react-slick, yarn add slick-carousel (타입스크립트 사용시 @types/react-slick 추가 설치) 가장 먼저, 슬라이드 설정을 해줘야 합니다. const settings = { dots: false, infinite: true, speed: 500, slidesToShow: 9, slidesToScroll: 9, initialSlide: 0, responsive: [ { breakpoint: 1440, settings: { slidesToShow: 7, slid..
styled-media-query로 반응형 디자인 구현하기 styled-media-query는 styled-component와 같이 반응형 디자인을 구현할 때 좋습니다. 사용법은 정말 간단합니다. 일단 styled-media-query를 npm 혹은 yarn으로 설치합니다. yarn add styled-media-query 혹은 npm install styled-media-query 그 후에, 전역적으로 영향을 미치는 최상위단의 파일에 (가령, styled-component를 사용하는 경우에는 GlobalStyles.js 내부) import { createGlobalStyle } from "styled-components"; import { generateMedia } from "styled-media-query"; import reset from "styled..
styled-components 사용법 일단 npm 혹은 yarn으로 styled-components를 설치합니다. yarn add styled-components 혹은 npm install styled-components 입력 가장 먼저, 공통으로 적용될 css을 설정해주기 위해 GlobalStyles.js라는 파일을 생성합니다. import { createGlobalStyle } from "styled-components"; import reset from "styled-reset"; const globalStyles = createGlobalStyle` ${reset}; a { text-decoration: none; color: inherit; } * { box-sizing: border-box; } body { font-family:..
Redux 사용법 import { configureStore } from "@reduxjs/toolkit"; import DetailReducer from "./reducers/DetailReducer"; import HomeReducer from "./reducers/HomeReducer"; import SearchReducer from "./reducers/SearchReducer"; import TVReducer from "./reducers/TVReducer"; export const store = configureStore({ reducer: { home: HomeReducer, tv: TVReducer, detail: DetailReducer, search: SearchReducer } }); 리덕스에서는 어플..
useEffect 사용법 useEffect를 사용하면 ComponentDidMount, ComponentDidUpdate, ComponentWillUnmount를 하나의 함수로 대체할 수 있다. 1. ComponentDidMount 대체 useEffect(() => { ... 로직 }, []); 로직 부분에 실행할 코드가 들어갑니다. 그러면 컴포넌트가 마운트될 때 실행되고 끝입니다. 2. ComponentDidUpdate 대체 const useFavicon = href => { const [favi, setFavi] = useState(href); useEffect(() => { const link = document.querySelector("link[rel*='icon']") || document.createElement("..
useReducer, useContext 함께 사용하기 import React from "react"; import Helmet from "react-helmet"; import Loader from "../Components/Loader"; import Message from "../Components/Message"; import { useDetail } from "../hooks/useDetail"; import Info from "../Components/Info"; import { useDetailState } from "../contexts/DetailContext"; function Detail() { useDetail(); const { loading, error } = useDetailState(); return loading ? ( Load..

티스토리툴바