천천히 알아가는 세상

안녕하세요. 이번에는 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') { // 엔터..

안녕하세요. 이번에는 prop-types의 React V15.5 버전 이후 설정 방법에 대하여 알아보겠습니다. 실습환경 CRA - create react app prop-types 관련 내용은 참고 사이트를 보시는 것을 추천드립니다. prop-types prop-types가 리액트 15 버전 이후부터는 따로 분리되었다고 한다. 설치 후 사용하면 된다. React v15.5부터 React.PropTypes 는 별도 패키지로 옮겨졌습니다. 대신 prop-types 라이브러리를 사용하시길 바랍니다. npm install --save prop-types 참고 사이트1 참고 사이트2 아래와 같이 파일을 작성합니다. App.js defaultProps => 자식 컴포넌트의 전달 값으로 text 값이 없는 경우 해당..

안녕하세요. 이번에는 배열 자체를 props로 전달해서 처리하는 방법을 해보겠습니다. 기본 CRA 환경에서 아래와 같이 파일을 작성해 줍니다. 1. 일반적인 사용방법 components/CustomList.jsx import React from 'react' export default function CustomList(props) { return ( {props.arr.map((el) => {el} )} ) } components/CallCustomList.jsx import React from 'react' import CustomList from './CustomList'; export default function CallCustomList() { const nameArr = ["뽀로로", "루피..