리액트 기초

[React.js] 리액트 useEffect 기본 사용

useEffect는 리액트의 함수형 컴포넌트에서 컴포넌트의 마운트 시(생성시), 마운트 해제 시(삭제시), 업데이트 시에 특정 로직을 실행될 수 있도록 하는데 사용한다. 클래스형 컴포넌트의 componentDidMount, componentWillUnmount, componentDidUpdate를 한번에 사용가능하도록 해주는 것이다. useEffect의 경우 다음과 같은 형태로 구현된다. useEffect(() => { 내부 로직 return () => {cleanup 함수} }, deps) 내부 로직은 말 그대로 조건에 맞는 상황에서 실행될 로직을 의미하며, return의 경우 cleanup 함수이다. deps의 경우 useEffect가 실행되는 기준이 될 값들의 배열을 의미한다. 조건문을 사용하여 좀..

[React.js] 리액트 useRef

useRef 함수는 리액트의 함수형 컴포넌트에서 사용하는 Hook의 한 종류로, 기본적으로 두 가지 기능을 가지고 있다. 1. 특정 DOM을 선택하여 저장 2. state와 관련없는 변수 저장 1. 특정 DOM을 선택하여 저장 특정 DOM 선택 기능은 보통 어떤 DOM element를 선택해 해당 element의 스크롤, 사이즈, 온 포커스 기능 등을 구현하기 위해 사용된다. import React, { useState, useRef } from "react"; function InputSample() { const [inputs, setInputs] = useState({ name: '', nickname: '' }); const nameInput = useRef(); // input element를 ..

[React.js] component 와 props

1. Component 우선, 리액트는 HTML에 직접 요소를 넣지 않는다. 기본적으로 index.html에 들어갈 내용을 index.js에서 불러와 사용한다. 이를 렌더링이라고 하고, 그 내부 요소들을 component라 한다. 이렇게 렌더링을 진행하는데, 이때 직접 렌더링 할 수 있는 component는 오직 하나이다. 따라서 보통 App.js를 렌더링하고, App.js 내 App() 함수에서 다른 component들을 사용하게 된다. 굳이 뽑자면 component는 함수이다. 다른 js파일을 생성하고 그를 import해 사용하더라도, 결국 그 js파일 내에 함수를 불러다가 사용하는 것과 같다. 2. Props Props란 부모 component가 자식 component에게 넘겨주는 매개변수라고 생각..