프론트엔드 첫걸음

[Udemy] React Complete guide section 13. 함수형 컴포넌트 import { Fragment, useState, useEffect } from 'react'; import Users from './Users'; import classes from './UserFinder.module.css'; const DUMMY_USERS = [ { id: 'u1', name: 'Max' }, { id: 'u2', name: 'Manuel' }, { id: 'u3', name: 'Julie' }, ]; const UserFinder = () => { const [filteredUsers, setFilteredUsers] = useState(DUMMY_USERS); const [searchT..

클래스 컴포넌트는 리액트 훅을 사용할수 없기때문에 useEffect()를 사용할 수 없다. 하지만 클래스 컴포넌트는 Component Lifecycle이라는 개념이 존재한다. 모든 컴포넌트는 DOM에 렌더링되거나 DOM에서 삭제될 때 등의 생명주기를 가진다. 생명주기를 달리하여 클래스컴포넌트를 서로 다른 시점에 추가할 수 있다. componentDidMount() render() 같은 내장함수로 리액트에서 import 한 내장컴포넌트를 확장하여 사용할 수 있다. 컴포넌트가 마운틴 된 직후 = 컴포넌트가 평가되고 DOM에 렌더링 될 때 이 메소드를 호출하여 사용한다. useEffect()를 사용한 것과 같다. useEffect({} ,[]) componentDidUpdate() 컴포넌트가 update되면 ..

함수형 컴포넌트 import { useState } from 'react'; import User from './User'; import classes from './Users.module.css'; const DUMMY_USERS = [ { id: 'u1', name: 'Max' }, { id: 'u2', name: 'Manuel' }, { id: 'u3', name: 'Julie' }, ]; const Users = () => { const [showUsers, setShowUsers] = useState(true); const toggleUsersHandler = () => { setShowUsers((curState) => !curState); }; const usersList = ( {DUMMY..

App.js import React, { useState, useCallback } from 'react'; import Button from './components/UI/Button/Button'; import DemoOutput from './components/Demo/DemoOutput'; import './App.css' function App() { const [listTitle, setListTitle] = useState('My List'); const changeTitleHandler = useCallback(() => { setListTitle('New Title') }, []); return ( Change List Title! ) } DemeList.js import React ,..

useCallbak - 함수를 리액트 내부저장공간에 저장해서 함수객체가 실행될 때마다 재사용하도록 할 때 useCallback을 사용한다. import React, { useState, useCallback } from 'react'; import Button from './components/UI/Button/Button'; import DemoOutput from './components/Demo/DemoOutput'; import './App.css' function App() { const [showParagraph, setShowParagraph] = useState(false); const [allowToggle, setAllowToggle] = useState(false); console.l..

리액트는 사용자 인터페이스 구축을 위한 자바스크립트 라이브러리이다. 리액트는 사용자 UI를 효과적으로 구성하며, 이에 대한 업데이트 역시 컴포넌트를 통해서 한다. 리액트 DOM은 웹에 대한 인터페이스이다. 리액트 자체는 UI구성만 관여하고, 실제 HTML요소들을 화면에 표시헤주는 것은 리액트 DOM이 한다. 리액트는 props(부모로부터의 data), state(내부 data), context(전역 data)가 변경될 때 컴포넌트를 변경시킨다. 리액트는 리액트 DOM에 변경사항을 알려주고, 리액트 DOM이 화면을 새롭게 출력하도록 한다. 이 때 리액트가 가상돔을 사용해서 리액트 돔에 변경사항에 대한 정보를 전달한다. 리액트가 상태 업데이트 후 갱신 전 후 의 상태차이를 인식하고 리액트가 컴포넌트 트리를 ..

자식 컴포넌트에 prop 을 객체로 전달 한 경우 자식 컴포넌트에서 해당 객체를 전개연산자로 받을 수 있다. 예) 부모컴포넌트에서 Input 이라는 자식컴포넌트의 input prop 에 값으로 객체를 전달함 return ( + Add ) 자식컴포넌트 Input에서 이와 같이 객체로 받음 import classes from './Input.module.css'; const Input = (props) => { return ( {props.label} ); }; export default Input; 아래와 같음 {props.label}

메뉴 탭을 클릭할 때마다 다른 주소를 가진 화면으로 이동하도록 구현해놓았다. 여기서 각각의 탭이 활성화 될 때마다 탭의 스타일이 변경되도록 하고 싶다. 이 때 useLocation을 사용할 수 있다. const currentRoute = useLocation().pathname; useLocation() 객체의 속성 pathname은 현재 url 의 정보를 제공한다. useLocation().pathname이 제공하는 url 값에 따라 동적으로 스타일 변경시켜주었다. import React from 'react'; import { Link, useLocation } from 'react-router-dom'; import { Navbar, Container, Nav } from 'react-bootstr..

/* 본인의 이해를 돕기 위해 적혀진 글입니다. 오류가 있을 수 있습니다. */ 사용상황 아래와 같이 공통으로 사용할 Input 컴포넌트 만들어준 다음에 Login 컴포넌트에서 재사용하려고 한다. Input.js import React, { useEffect, useRef } from 'react'; import classes from './Input.module.css'; const Input = (props) => { const inputRef = useRef(); const activate = () => { inputRef.current.focus(); }; return ( {props.label} ); }; export default Input; Login.js import React, { use..

1. 리액트 훅은 리액트 컴포넌트에서만 호출한다. 리액트 컴포넌트나 커스텀 훅에서만 호출한다. 2. 리액트 컴포넌트의 최상위수준에서만 호출한다. useEffect( () => { useContext() ... (x) 3. useEffect를 쓸때 주변 컴포넌트에서 오는 데이터들은 의존성 배열로 넣어줘야한다. useEffect(() => { const identifier = setTimeout(() => { setFormIsValid(passwordValid && passwordValid); }, 500); return () => { clearTimeout(identifier); }; }, [emailValid, passwordValid]); emailValid, passwordValid는 주변컴포넌트에서..