React (35) 썸네일형 리스트형 useEffect 1 (로그인 / 로그아웃) useEffect 우선 LifeCycle에 대해 살펴보고 useEffect에 대해 정리해보겠습니다. 사람에게 LifeCycle이란 시간이 흐름에 따라, 탄생부터 죽음에 이르는 순간에 따른 단계적인 과정입니다. 이때 사람은 LifeCycle 주기 nicehyun12.tistory.com const [isLoggedIn, setIsLoggedIn] = useState(false); 위의 이미지는 State를 이용하여 로그인을 하면 State를 true로 업데이트시켜 UI를 업데이트하는 컴포넌트를 사용한 것입니다. 하지만 로그인을 하고 새로고침 등 애플리케이션을 다시 로드할 경우 전체 리액트 스크립트가 다시 시작되기 때문에 실행에서 얻은 모든 변수가 사라지게 됩니다. 다시 로드될 때 모든 데이터가 사라지므로 .. React Portal 사용법 Portal을 사용하기 위해서는 컴포넌트를 이동시킬 장소, 컴포넌트에게 그곳에 Portal을 가져야 한다고 알려주어야 합니다. 해당 장소를 표시하기 위해 public 폴더로 이동하여 index.htm 파일을 확인합니다. index.htm 파일의 body 태그 부분에서 컴포넌트를 이동시킬 장소를 표시해줍니다. id는 해당 위치로 찾아오기 위해 사용됩니다. 이렇게 컴포넌트를 이동시킬 위치를 설정해주었습니다. const Backdrop = (props) => { return ( ); }; const ModalOverlay = (props) => { return ( {props.title} {props.message} Okay ); }; const ErrorModal = (props) => { return ; .. 불 필요한 <div> 제거하기 (Fragment) 컴포넌트를 만들고 사용하는 부분에 있어서 불 필요한 div가 많이 발생합니다. 세분화된 컴포넌트를 만들어 App.js에서 사용하게 되면 감싸기 위해 사용된 수많은 div를 확인할 수 있게 됩니다. 해결방안 const Wrapper = (props) => { return props.children; }; export default Wrapper; 감싸는 컴포넌트를 하나 생성해주었습니다. 해당 컴포넌트로 감싸게 되면 의미 없는 div를 사용하지 않고 컴포넌트를 생성할 수 있습니다. 하지만 불 필요한 div를 없애기 위해 만든 컴포넌트는 React에서 제공하기 때문에 직접 만들 필요가 없습니다. 위의 이미지처럼 감싸고 있는 요소에 React.Fragment를 사용해주시면 됩니다. CSS 모듈을 사용한 스타일 적용 여러 사람과 프로젝트를 진행하다 보면 클래스 이름이 겹치는 경우가 발생할 수 있습니다. 이때 유용하게 사용할 수 있는 것이 CSS 모듈입니다. CSS 모듈 사용 전 기존에는 CSS 파일 확장자를 css를 사용하여 파일을 만들어 주었습니다. CSS 모듈 사용 CSS 모듈을 사용하기 위해서는 CSS 파일을 위의 이미지와 같이 파일 이름 뒤에 .module.css를 붙여 만들어줍니다. CSS 모듈 사용 전 import "./CourseInput.css" 기존에는 CSS 파일을 위와 같이 import 해주었습니다. CSS 모듈 사용 import styles from "./CourseInput.module.css"; CSS 모듈을 사용하기 위해서는 위의 코드와 같이 import를 해줍니다. import 뒤에 st.. styled Components을 사용한 스타일링 styled Components 패키지는 사용하면 특정 스타일이 첨부된 컴포넌트를 구축할 수 있도록 도와주는 패키지입니다. 특정 스타일이 첨부되는 컴포넌트에서만 영향을 미치고 다른 컴포넌트에는 전혀 영향을 미치지 않습니다. 우선 styled Components 접속하시거나 위의 명령어를 터미널에 입력하여 패키지를 다운로드합니다. styled-components Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅🏾 styled-components.com 기존 스타일링 import React from 'react'; import './Button.css'; cons.. 동적으로 클래스 설정하기(State와 삼항연산자) State와 삼항 연산자를 이용하여 동적으로 클래스를 설정하여 스타일링하는 방법을 정리해보도록 하겠습니다. 위의 이미지에서 input에 입력값을 넣지 않으면 Course Goal의 색깔을 변경해보도록 하겠습니다. State // 사용자 입력값 State const [enteredValue, setEnteredValue] = useState(""); // 사용자 입력값 유효성 State const [isValid, setIsValid] = useState(true); State의 기본값을 true로 설정하고 사용자의 입력이 있다면 true, 사용자의 입력이 없다면 false로 업데이트해주는 것이 목표입니다. handler const formSubmitHandler = (event) => { event.pr.. 동적으로 인라인 스타일 설정하기(State와 삼항연산자) State와 삼항 연산자를 이용하여 동적으로 인라인 스타일링하는 방법을 정리해보도록 하겠습니다. 위의 이미지에서 input에 입력값을 넣지 않으면 Course Goal의 색깔을 변경해보도록 하겠습니다. State // 사용자 입력값 State const [enteredValue, setEnteredValue] = useState(""); // 사용자 입력값 유효성 State const [isValid, setIsValid] = useState(true); State의 기본값을 true로 설정하고 사용자의 입력이 있다면 true, 사용자의 입력이 없다면 false로 업데이트해주는 것이 목표입니다. handler const formSubmitHandler = (event) => { event.preventD.. 여러개의 State 하나로 합치기 기존 코드 const ExpenseForm = () => { const [enteredTitle, setEnteredTitle] = useState(""); const [enteredAmount, setEnteredAmount] = useState(""); const [enteredDate, setEnteredDate] = useState(""); const titleChangeHandler = (event) => { setEnteredTitle(event.target.value); }; const amountChangeHandler = (event) => { setEnteredAmount(event.target.value); }; const dateChangeHandler = (event) => { s.. 이전 1 2 3 4 5 다음
