천천히 알아가는 세상

안녕하세요. 이번에는 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..

안녕하세요. 이번에는 React의 State로 객체, 배열을 사용하는 방법에 대하여 알아보겠습니다. 1. 객체 또는 배열을 State로 사용하는 경우 State는 값이 변경되면 리렌더링을 하지만, 원시 타입의 경우에는 변수에 값이 그대로 들어가 있어서 리렌더링이 발생합니다. 하지만, 객체 타입을 사용하게 되면 변수에는 메모리 주소 값이 들어가 있으며, 메모리 주소에 접속해야 실제 값이 있기 때문에 State의 입장에서는 메모리 값이 변하지 않는 것으로 보이게 되어 리렌더링이 발생하지 않게 됩니다. 이번 코드에서 작업한 거는 메모리 주소를 변경한 것이 아니라 메모리 주소에 연결되어 있는 값을 변경한 것이기 때문에 state에서는 값이 그대로 인 것으로 인식하여 리렌더링이 발생하지 않는다. App.js im..