프론트엔드 첫걸음

자식컴포넌트에서 부모컴포넌트로 데이터를 보내주고 싶으면??? 부모컴포넌트에서 만든 함수를 prop으로 자식한테 넘겨준다. 자식컴포넌트에서 입력받은 데이터를 부모컴포넌트에서 받은 함수의 매개변수로 넘겨주면, (부모컴포넌트에 함수가 있으므로) 부모컴포넌트에서 데이터를 확인할 수 있다. 예) App.js > NewExpense.js > ExpenseForm.js 로 상하구조가 설정되어있을 때 ExpenseForm.js에서 받은 데이터를 App.js까지 끌어올려줘야할때는? 1. ExpenseForm에서 NewExpense로 전달 2. NewExpense에서 App으로 전달 두 단계가 같은 과정으로 이뤄진다. (반복해서 보면 기억이 잘나니까 두단계짜리 예시를 씀) 1. ExpenseForm.js에서 수정한 데이터..

setState는 비동기적으로 작동한다. 이벤트 핸들러안에서 호출된 setState는 setState가 얼마나 많이 호출되었든 상관없이 이벤트가 끝날때 딱 한번 리렌더링 된다. 이는 불필요한 렌더링을 막아 리액트의 성능을 높인다. 이것을 오브젝트 컴포지션으로 설명할 수 있다. setState가 여러번 호출되면 인자로 전달된 각 객체를 추출하여 단일 객체로 merge하고, 이렇게 만들어진 단일 객체를 사용해서 상태를 업데이트 한다. // state를 합치는 merging 작업 const resultObj = Object.assign({}, {a: 10}, {b: 20},{a: 30}) 따라서 setState에 객체를 전달하여 이전상태에서 다음상태로 update하려고 하는것은 안전하지 않다. setState..

각 컴포넌트를 감싸는 div 태그에 공통적으로 적용되는 css를 가진 Card라는 래퍼컴포넌트를 만들어서 div를 대체할 수 있다. 래퍼컴포넌트 적용 전 return ( ); Card.css .card { border-radius: 12px; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25); } 해당 css는 Card가 대체할 것 이므로 Card가 외부에서 받는 클래스로 적용되는 css를 수정한다. (expenses.css에서 위 스타일링을 제거) Card.jsx import React from 'react'; import '../UI/Card.css'; const Card = (props) => { const classes = 'card ' + props.className; ..

https://ko.reactjs.org/docs/react-api.html React.PureComponent React.PureComponent는 React.Component와 비슷합니다. React.Component는 shouldComponentUpdate()를 구현하지 않지만, React.PureComponent는 props와 state를 이용한 얕은 비교를 구현한다는 차이점만이 존재합니다. React 컴포넌트의 render() 함수가 동일한 props와 state에 대하여 동일한 결과를 렌더링한다면, React.PureComponent를 사용하여 경우에 따라 성능 향상을 누릴 수 있습니다. shouldComponentUpdate - props와 state 얕은 비교하여 업데이트 할지 말지 결정하..