react 썸네일형 리스트형 [react] 제어 컴포넌트(Controlled Component)와 비제어 컴포넌트(UnControlled Component) 1. 제어 컴포넌트(Controlled Component) 입력 폼 엘리먼트(input, textarea, select)는 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트한다. state는 setState()에 의해 계속해서 업데이트되기 때문에 입력 폼 엘리먼트에 value에 state를 적용해주면 그 엘리먼트는 제어 컴포넌트가 된다. 제어 컴포넌트는 사용자에게 보여지는 화면과 저장된 데이터가 실시간으로 동기화된다. 실시간으로 값이 필요할때는 제어 컴포넌트를 사용하는 것이 좋다. import { useState } from 'react'; const App = () => { const [name, setName] = useState(''); const nameChangeHandler = e.. 더보기 [react] 절대 경로 사용해서 import 하는 방법 Importing a Component | Create React App This project setup supports ES6 modules thanks to webpack. create-react-app.dev 프로젝트 가장 상위 폴더에 jsconfig.json 파일을 생성한다. 생성된 jsconfig.json 파일 안에 아래 코드를 넣어주면 끝! { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } import Button from './Button'; 상대 경로로 import하던 것을 import Button from 'components/Button'; 이제 절대 경로로 import 가능하다. import Button from 'sr.. 더보기 [react] github에서 API key값 숨기기(ex. firebase) 폴더구조 firebase.js API 정보가 들어 있는 파일 "" 안에 값은 입력되어 있다고 가정! import { initializeApp } from 'firebase/app'; const firebaseConfig = { apiKey: "", authDomain: "", databaseURL: "", projectId: "", storageBucket: "", messagingSenderId: "", appId: "" }; const app = initializeApp(firebaseConfig); export default app; .env 리액트에서 환경변수를 사용하기 위해서는 반드시 REACT_APP_를 필수로 입력해주고 그 다음에 key 이름을 적어줘야한다. 그렇게 해야 인식이 가능하도록 설.. 더보기 [react] react에서 firebase 사용방법 firebase에 접속한다. Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com 로그인 후 오른쪽 위 콘솔로 이동 클릭 프로젝트 생성하기 클릭 일단 애널리틱스 사용 설정 해제 후 프로젝트 만들기 클릭 우리는 웹사이트를 만들거기 때문에 세번째 웹을 선택 앱 닉네임 작성 뒤 앱 등록 클릭 그러면 이제 firebase SDK를 추가를 하라고 한다. 터미널에 입력하여 설치한다. npm install firebase 설치 후 src 폴더에 firebase.js를 생성 후 SDK를 추가한다. 터미널에 입력 후 에러가 없다면 성공! npm run start 더보기 [react] useScroll, useFullScreen 1. useScroll 스크롤의 움직임을 감지하는 hook import "./styles.css"; import { useState, useEffect, useRef } from "react"; const useScroll = () => { const [state, setState] = useState({ x: 0, y: 0 }) const onScroll = () => { setState({y: window.scrollY, x: window.scrollX}); } useEffect(() => { window.addEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll); }, []) retu.. 더보기 [react] Hooks란? Hook에 대한 이론을 완벽하게 이해하지 않고 useState나 useEffect를 쓰다 보니 오잉? 싶은 부분이 많았다 다시 되짚어볼 겸 리액트 훅에 대해 정리해보자! 1. Hooks란? Hook은 React 16.8 버전에 새로 추가된 기능으로, class를 사용하지 않고도 state를 가질 수 있게 해 준다. Hook을 사용하면 클래스형 컴포넌트를 사용할 때에 비해 코드가 간결해져서 가독성이 좋아진다. Hook은 왜 만들어졌을까? 기존 클래스형 컴포넌트에서의 단점을 함수형 컴포넌트를 사용함으로써 보완할 수 있었다. 하지만 클래스형 컴포넌트의 장점인 state이나 life cycle을 함수형 컴포넌트에서 직접 다루는 것은 불가능했다. 이 문제를 해결하기 위해 Hook이 등장한 것이다. 2. Hook .. 더보기 [react] 라이프사이클(mount, update, unmount) 1. 라이프사이클 ① 마운트 (mount) constructor 컴포넌트 생성자 메서드 이 메서드에서 초기 state를 정할 수 있다. getDerivedStateFromProps props로 받아온 값은 state에 동기화시키는 메서드 컴포넌트가 마운트될 때, 업데이트될 때 호출된다. render 컴포넌트를 렌터링하는 메서드 componentDidMount 컴포넌트가 마운트된 뒤(컴포넌트의 첫 번째 렌더링이 끝난 뒤) 호출되는 메서드 이 메서드가 호출되는 시점에는 이미 화면에 컴포넌트가 만들어져 있다. useEffact와 같은 동작을 수행한다. useEffect(() => { .... },[]) ② 업데이트(update) getDerivedStateFromProps 컴포넌트의 props나 state가 .. 더보기 [react] useFadeIn, useNetwork 1. useFadeIn opacity 0 에서 opacity 1로 만드는 hook import "./styles.css"; import { useState, useEffect, useRef } from "react"; const useFadeIn = (duration = 1, delay = 0) => { // duration 초기값 1, delay 초기값 0 if(typeof duration !== 'number' || typeof delay !== 'number'){ return; } const element = useRef(); useEffect(() => { if (element.current) { const { current } = element; current.style.transition = .. 더보기 이전 1 2 3 4 다음
