천천히 알아가는 세상

안녕하세요. 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 = ["뽀로로", "루피..

안녕하세요. 이번에는 React 컴포넌트 사용 시 배열을 이용해서 출력을 해보겠습니다. 먼저 파일들을 아래와 같이 작성해 줍니다. components/ListChild2.jsx import React from 'react' export default function ListChild2({title, content}) { return ( {title} {content} ) } components/Modal.jsx import React from 'react' export default function Modal() { return ( 오늘 해야할 일 2개 오늘 완료한 일 0개 ) } components/List2.jsx import React from 'react' import ListChild2 from..

안녕하세요. 이번에는 1개의 컴포넌트를 재사용하면서 활용하는 방법을 해보겠습니다. 그리고 재사용되는 컴포넌트의 내부 데이터 값이 다르게 설정하는 방법도 알아보겠습니다. 기존 HTML에서는 기존의 것과 동일한 코드가 있어도 모두 작성해야만 했습니다. EJS에서는 include로 불러와서 사용했지만, React에서는 컴포넌트로 활용할 수 있습니다. 1. 중복되는 부분 컴포넌트로 불러와서 사용하기 App.js import './App.css'; import List from './components/List'; function App() { return ( ); } export default App; components/List.jsx import React from 'react' import Modal fr..