프론트엔드 첫걸음

자식 컴포넌트에 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는 주변컴포넌트에서..

아래와 같은 코드가 있다. useEffect(() => { setFormIsValid( enteredEmail.includes('@') && enteredPassword.trim().length > 6 ); }, [enteredEmail, enteredPassword]); const emailChangeHandler = (event) => { setEnteredEmail(event.target.value); }; const passwordChangeHandler = (event) => { setEnteredPassword(event.target.value); }; 그러나 이 input에서 입력할때마다 이벤트가 발생하므로 이벤트 지연이 필요할 것 같다. 사용자가 타이핑을 살짝 멈출때 유효성을 확인하도록 개..

리액트 라이브러리 자체의 목적은 UI 렌더링이다. 사용자의 행위와 상호작용하면서 재렌더링 하는 것이다. 화면에 뭔가를 가져오는 것 외의 것을 사이드 이펙트(side-effect)라고 한다. HTTP 리퀘스트를 보내는 것, 브라우저저장소에 정보를 저장하는 것 등이 사이드 이펙트다. 이러한 것은 리액트가 고려해야하는 작업이 아니다. 이런 사이드이펙트는 컴포넌트 평가의 밖에서 이뤄져야한다. 사이드 이펙트가 너무 오래걸리는 작업이면 컴포넌트 렌더링이 지연되며, 사이드 이펙트에 의해 state가 변경된다면 무한루프에 빠질 수 있다. useEffect는 사이드이펙트를 처리하기 위해서 만들어졌다. side effect 작업을 분리시켜 다른 시점(ComponentDidMount)에서 처리하도록 하는 것이 useEffe..

위와 같은 위치의 모달이 있다. 이 모달은 제대로 동작하나 이는 시멘틱한 구조가 아니라고 한다. 중첩을 방지하기 위해서 모달 HTML 을 가능하면 최상위에 두라고 한다. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You’ll likely run into issues when nesting a .modal within another fixed element. 가능하면 모달 HTML을 최상위 위치에 배치하여 다른 요소의 잠재적인 간섭을 방지하세요. 다른 fixed 스타일을 갖는 요소 내에 중첩할 때 문제가 발생할 수 있습니다 . https:/..

1. 설치 터미널을 열고 해당 리액트프로젝트내에서 npm install --save styled-components 명령어 입력 => styled component 설치 styled component 사용할 파일 상위에 import styled from 'styled-components' 입력 2. 사용 styled.button` styled.a` styled.div` Styled components는 위와 같은 코드로 시작한다. styled는 styled-components에서 import하는 객체이고, 이 객체를 통해 button, a, div 메소드에 접근할 수 있는 것이다. 이 메소드에 백틱으로 만든 리터럴을 넘겨주는 것인데, 이것은 Tagged Templated literal 이라는 문법이다. ..

isValid는 setState로 설정한 state 변수이다. state 에 따라서 style을 다르게 적용시키려고 할 때 인라인 방식으로 스타일을 설정하거나 class로 설정할 수 있다. isValid = true 일 때 줄 스타일 invalid 설정 /*form-control과 invalid 클래스가 동시에 있을 때 .form-control.invalid 내부의 input 스타일 form-control과 invalid 사이에 띄어쓰기가 없음*/ .form-control.invalid input { border-color: red; background: #ffd7d7; } .form-control.invalid label { color: red; } 1. 동적인 인라인 스타일 설정 Course Goal..

useState 사용하여 입력된 데이터 관리하기 import React, { useState } from 'react'; import './ExpenseForm.css'; const ExpenseForm = (props) => { const [enteredTitle, setEnteredTitle] = useState(''); const titleChangeHandler = (event) => { setEnteredTitle(event.target.value); }; /**중략**/ return ( Title ); }; export default ExpenseForm; input 태그의 onChange 에 달려있는 titleChangeHandler로 title을 바꾼다. titleChangeHandler ..