미미 공부/취미방

1) React Component가 하는 일 세가지 Mounting, Updating, Unmounting 2) Mounting 코드가 만들어지고 뿌려지는 함수들 constructor() : 바닐라 자바스크립트에서 온 애(class를 이해해야됨) static getDerivedStateFromProps() render() componentDidMount() 3) Update 데이터(state)가 업데이트 될때 동작하는 함수들 static getDerivedStateFromProps() shouldComponentUpdate() render() getSnapshotBeforeUpdate() componentDidUpdate() 4) Unmounting 코드가 없어질때 동작하는 함수들 (페이지가 바뀔때 등)..

1) setState()로 state object 변화를 감지하고 render를 다시 동작시켜야 된다. class App extends React.Component { state = { count: 0 }; add = () => { console.log("add"); }; minus = () => { console.log("minus") }; render() { return ( The number is {this.state.count} add minus ) } } add = () => { this.state.count = 1; }; minus = () => { this.state.count = -1; }; 위의 코드는 동작하지 않는다. 그 이유는 add / minus 버튼을 클릭 > state objec..

1) State는 변화하는 데이터를 다루기 위한 것 (Prop은 이런 변화하는 데이터를 다루지 못 함) state를 사용하기 위해서는 App() Function Component를 Class Component로 정의해 주어야 한다. class App extends React.Component {} 위의 코드는 React.Component가 가지고 있는 것들을 가져와서 Class Component named App이 사용하려고 한다고 이해하면 될 것 같다. 2) Class Component App = React.Component React.Component를 가져다 쓰는 App Class Component는 React.Component와 동일하게 render method를 가지고 있다. class App ..

1) Property Type을 정의해 데이터에러를 줄여주는 패키지 숫자 데이터 타입을 가져와야 하는데 문자 타입을 가져오면 에러가 날 수 있어서 미리 가져오려는 데이터 타입을 정의하고, 콘솔에 경고 메세지로 이를 방지해 준다. Terminal에 npm i prop-types 을 치면 다운로드가 시작되고 package.json에 prop-types가 생긴다. App.js에 import PropTypes from "prop-types"; 를 넣어주고 데이터를 받고있는 HTML 구조를 갖고있는 함수 아래에 Food.propTypes = { name: PropTypes.string.isRequired, pictuer: PropTypes.string.isRequired, rating: PropTypes.numb..

1) 내가 이해한 JSX //JavaScript + HTML const jsxEl = Hello, world! JSX는 JavaScript 문법과 HTML문법이 합쳐진 형태이다. React에서 사용되고 UI가 어떻게 생겼는지 나타낸다. JSX가 HTML같이 생기긴 했지만 JavaScript라는거! JSX는 React에서 "Elements"를 만들어낸다. JSX는 마크업(문서 처리를 위해 문서에 추가되는 정보)과 논리를 따로 분리하지 않고 로직과 합쳐서 "components(요소)"를 만들어낸다. (쉽게 말하면 JavaScript랑 HTML을 섞어서 요소를 만들어내는 듯) React는 어쨌든 JavaScript이기 때문에 반.드시. JSX를 사용할 필요는 없다. 대부분의 사람들은 JavaScript로 UI..