천천히 알아가는 세상

안녕하세요. 이번에는 React의 Hook 중 하나인 useEffect 사용법에 대하여 알아보겠습니다. 실습환경 CRA - create-react-app 먼저 React의 Life Cycle에 대하여 알아야합니다. 1. Life Cycle 컴포넌트의 Life Cycle Mount : 컴포넌트가 화면에 첫 렌더링 할 때 Update : state 변화로 리렌더링 될 때 Unmount : 화면에서 사라질 때 2. 클래스형 컴포넌트의 Life Cycle Life Cycle 상황에 맞게 특정 기능을 수행할 수 있도록 다양한 기능을 제공한다. 클래스형 컴포넌트는 상황마다 사용하는 함수가 다릅니다. Mount : 컴포넌트가 화면에 첫 렌더링 할 때 - componentDidMount() Update : state ..

안녕하세요. 이번에는 React의 조건부 렌더링 사용하는 방법에 대하여 알아보겠습니다. React는 상황에 따라서 원하는 내용을 출력할 수 있습니다. 이때 삼항 연산자, useState 등을 많이 사용합니다. 실습환경 CRA - create-react-app 아래와 같이 파일을 작성합니다. /components/Item.jsx import React from 'react' export default function Item() { return ( 보이나요? ) } /components/ConditionalRender.jsx import React from 'react' import { useState } from 'react' import Item from './Item'; export default f..

안녕하세요. 이번에는 useState, useRef, Variable 3개를 비교해보도록 하겠습니다. useState 변경 시 리렌더링되며, 변경 값으로 적용된다. useRef 변경되어도 리렌더링되지 않지만, 값은 유지되며 리렌더링 시 변경 값으로 적용된다. Variable 변경되어도 리렌더링되지 않으며, 리렌더링 시 초기 값으로 돌아간다. /components/Comparing.jsx import React, { useRef } from 'react' import { useState } from 'react' export default function Comparing() { const [countState, setCountState] = useState(0); const countRef = useRe..

안녕하세요. 이번에는 useRef에 대하여 알아보겠습니다. 실습환경 CRA - Create React App useRef 컴포넌트가 리렌더링 되어도 값을 유지하고 싶을 때 사용한다. 주로 Input 태그에 많이 사용한다. 참조하고자 하는 DOM 요소에 ref 속성을 주고 해당 태그의 변화를 감지하거나 DOM 요소를 컨트롤할 수 있다. VanilaJS의 querySelector 또는 getElementById 같은 역할을 손쉽게 구현할 수 있다. useRef 사용방법 useRef를 사용하여 변화를 감지하거나 DOM 요소를 컨트롤하고 싶은 태그에 ref 속성을 부여한다. /components/TestRef.jsx import React, { useRef } from 'react' import { useSta..

안녕하세요. React에서 Enter 이벤트 설정하는 방법에 대하여 알아보겠습니다. keyCode를 이제는 안 쓰는 것으로 알고 있지만, 아직 사용하는 곳도 있을 수 있기 때문에 2개다 작성하였습니다. keyCode는 필요 없으면 삭제하셔도 무방합니다. onKeyPress는 이제 사용하지 않으므로 onKeyDown으로 구현하겠습니다. EnterTest.jsx 아이디를 입력하는 input 창에서 커서를 두고 Enter를 입력하면 이벤트가 발생합니다. export default function EnterTest() { const onSubmitEnter = (e) => { // if(e.key === 'Enter' || e.keyCode === 13) { if(e.key === 'Enter') { // 엔터..