Dev/React 3

C

React Component가 리렌더링 되는 이유

웹 플젝 하던 중 Context, 모달, 소켓 등이 짬뽕되자 원하지 않는 부분에서 자꾸 렌더링이 되는 문제가 있어서 알아본 내용.Component가 리렌더링 되는 경우들State가 변경될 때: 컴포넌트의 state가 변경되면 해당 컴포넌트와 그 하위 컴포넌트들이 리렌더링됩니다. this.setState({ value: newValue });Props가 변경될 때: 부모 컴포넌트에서 전달되는 props가 변경되면 자식 컴포넌트가 리렌더링됩니다. 부모 컴포넌트가 리렌더링될 때: 부모 컴포넌트가 리렌더링되면 자식 컴포넌트들도 리렌더링됩니다.forceUpdate가 호출될 때: forceUpdate 메서드를 호출하면 강제로 컴포넌트가 리렌더링됩니다. this.forceUpdate();Context가 변경될 때: ..

Dev/React 2024.12.18

C

[React] npm packages for React

# prop-types https://www.npmjs.com/package/prop-types npm i prop-typesComponent에 사용되는 properties의 속성을 지정해 준다. import PropTypes from 'prop-types'; function Potato({ name, rating, img }) { return ( {name} {rating} ); } Potato.propTypes = { name: PropTypes.string.isRequired, // string, 값이 반드시 존재 img: PropTypes.string, rating: PropTypes.number, } Potato의 파라미터로 들어오는 properties이 위 조건에 맞지 않으면 W..

Dev/React 2021.08.02

C

[React] 강의 메모

설치 npx install create-react-app [설치할 폴더] 이 명령어만으로 Webpack, Babel 등을 설치 할 필요 없이 한번에 리액트 개발 세팅을 해줌 리액트 동작 index.html ... 리액트는 실행시, 작성한 모든 react application (html css js)을 안에서 동작시킨다. Component Component는 HTML을 반환하는 함수. JSX는 JS안의 HTML App.js의 Component function App() { return ( Heloo!!!! ); } index.js에서의 App() Component사용 ReactDOM.render( , document.getElementById('root') ); 새로운 Component 만들기 Potato..

Dev/React 2021.08.02