ReactJS11 [React] 13. useEffect() 사용법 총정리 안녕하세요. 박기린 입니다. 이번엔 React Hooks 중 하나인 useEffect()에 대해 알아보겠습니다. Effect(Side Effect)란 무엇일까? useEffect()를 알기 위해선, Effect가 무엇인지를 먼저 알아야 합니다. 여기서 Effect는 Side Effect와 동일한 의미를 지닙니다. React의 주요한 임무는 UI 렌더링입니다. 유저가 키보드를 누르든 클릭을 하든, 입력에 반응하여 필요할 때 UI를 다시 렌더링합니다. React의 역할 - state, props를 관리한다. - state와 props를 기반으로 JSX와 DOM을 평가하고, UI를 렌더링한다. - 유저의 입력을 실시간으로 확인한다. 이러한 React의 역할들은 '화면에 무언가를 가져오는 것(Bringing s.. 2023. 7. 20. [React] 12. CSS 모듈 사용하기 안녕하세요. 박기린 입니다. 이번엔 ReactJS의 스타일링 모듈인 CSS에 대해 알아보겠습니다. css 모듈을 사용하는 이유 모든 React 프로젝트에는 css모듈이 내장되어 있습니다. 기존의 css 파일은 컴포넌트 단위가 아니라 전역 단위로 적용이 되는 탓에 문제가 발생하였고, 이를 해결하기 위해 styled-components라는 외부 모듈을 사용한다고 저번에 소개를 해드렸습니다. 외부 모듈을 설치하는 방법 대신에, React에 내장된 css 모듈을 이용해서 컴포넌트 단위로 스타일링을 할 수 있습니다. css 모듈 사용해보기 import React from "react"; import styles from "./Button.module.css"; const Button = props => { ret.. 2023. 3. 28. [React] 11. styled-components 사용하기 안녕하세요. 박기린 입니다. 이번엔 ReactJS의 스타일링 모듈인 styled-components에 대해 알아보겠습니다. 공식 사이트 : https://styled-components.com/ styled-components가 필요한 이유 React 프로젝트의 컴포넌트들을 css 파일을 이용해서 스타일링하는 경우, 비록 컴포넌트 파일(js/ts)에서 css 파일을 import해서 사용한다고 해도, 그 css 파일의 스타일을 해당 컴포넌트에만 국한되지 않고 전역으로 적용시킵니다. .form-control { margin: 0.5rem 0; } .form-control label { font-weight: bold; display: block; margin-bottom: 0.5rem; } 예를 들어, 위와.. 2023. 3. 27. [React] 10. useRef(), ref에 대해 알아보기 안녕하세요. 박기린 입니다. 이번엔 리액트 훅 - useRef()에 대해 알아보겠습니다. ref ref는 DOM 요소에 직접 접근해서 작업을 하기 위해 존재합니다. ref가 필요한 이유 (ref vs state) 에 state가 연결되어 있으면, 무언가를 입력할 때마다 state가 바뀝니다. 리액트의 state는 값이 변하면, 그때마다 매번 컴포넌트들이 재렌더링됩니다. 만약 블로그에 긴 글을 쓰는 경우, 수 천자의 분량을 써내려가는 동안 매번 컴포넌트가 재렌더링된다면 굉장히 비효율적일 것입니다. ref는 state와 다르게, HTML DOM에 접근해서 DOM 안에 적힌 값을 알아갑니다. 의 값이 얼마나 변하든 상관없이, ref를 접근한 그 시점을 기준으로 안에 적힌 값만을 취합니다. 블로그에 계속 글을 .. 2023. 3. 6. [React] 9. 리스트 데이터 출력하기 안녕하세요. 박기린 입니다. 이번엔 리스트 데이터를 목록형태로 출력하는 방법에 대해 알아보겠습니다. List 데이터 렌더링 {props.items.map((expense) => ( ))} JS에 내장된 Array.prototype.map()을 이용해서 Array로 이루어진 props를 한 번에 컴포넌트로 렌더링할 수 있습니다. map()은 Array를 return하는데, React는 jsx(컴포넌트)를 element로 하는 Array를 자동으로 나란히 렌더링한다. 원본 데이터 형태 (접은 글 펼치기) 더보기 const expenses = [ { id: "e1", title: "Car Insurance", amount: 294.67, date: new Date(2022, 2, 20), }, { id: "e.. 2023. 3. 3. [React] 8. <form /> 태그 다루기 안녕하세요. 박기린 입니다. 제출하기 {... 들} Add Expense 1. 컴포넌트가 존재하고, 2. 안에 컴포넌트가 있으며, 3. 의 type이 'submit'일 경우, 4. 의 onSubmit prop을 이용해서 양식을 제출합니다. onSubmit을 이용하면, 홈페이지의 지정된 버튼을 누르는 것 뿐만 아니라, submit 기능에 관하여 브라우저가 내장하고 있는 기능도 사용할 수 있습니다. 그러니 컴포넌트를 사용할 경우에는 onSubmit prop을 꼭 이용합시다. onSubmit const submitHandler = (event) => { event.preventDefault(); const expenseDate = { title: enteredTitle, amount: enteredAmount.. 2023. 2. 23. [React] 7. 여러 개의 state를 다루기 안녕하세요. 박기린 입니다. 여러 State 생성하기 const [enteredTitle, setEnteredTitle] = useState(""); const [enteredAmount, setEnteredAmount] = useState(""); const [enteredDate, setEnteredDate] = useState(""); const [counter, setCounter] = useState(1); 한 파일(컴포넌트) 안에 위처럼 여러 개의 state를 설정할 수 있습니다. const titleChangeHandler = (event) => { setEnteredTitle(event.target.value); }; const amountChangeHandler = (event) => {.. 2023. 2. 20. [React] 6. useState()를 파헤쳐 보기 안녕하세요. 박기린입니다. 이번에는 React 컴포넌트의 데이터 관리와 출력을 위해 사용되는 React Hooks - useState에 대해 알아보겠습니다. Import useState import { useState } from "react"; React hooks는 react 모듈에서 import 할 수 있습니다. useState 파헤쳐 보기 const ExpenseItem = (props) => { const [title, setTitle] = useState(props.title); const clickHandler = () => { setTitle('Updated!'); console.log(title) } } const [ state이름 , set + State이름 ] = useState( 초.. 2023. 2. 13. [React] 5. 이벤트 리스너와 이벤트 핸들러 만들기 (onProps) 안녕하세요. 박기린 입니다. 이번엔 React 컴포넌트의 이벤트 핸들러 함수를 만드는 방법에 대해 알아보겠습니다. onProps // ChangeButton.js const ChangeButton = (props) => { const clickHandler = () => { console.log('clicked'); }; return Change Title; } 위의 코드 중 을 보면 onClick props가 보입니다. 이름이 on으로 시작되는 props는 React의 관행에 따라 '항상 함수를 인수로 받는 props'를 뜻합니다. 그리고 그 함수는 이벤트 핸들러로, onProps의 실행 조건이 나타나면 핸들러 함수가 작동합니다. 만약 버튼이 클릭되면, onClick에 담긴 핸들러 함수가 실행이 되는 .. 2023. 2. 7. 이전 1 2 다음
