React는 component 를 사용해서 html처럼 작성하려는 경우에 필요
컴포넌트와 App.js
컴포넌트는 ReactDom을 렌더링 하는 과정에서 필요한 함수적 요소이다.
말 그대로 HTML을 뱉는(반환하는)함수!
이것을 App.js 파일에서 각각 만들 수 있다.
Html을 JS로 다루는 기술인데, 우리는 이 기술을 JSX라고 한다.
javascript안의 HTML = JSX
(react에만 특화된 개념)
-jsx 에서 component에 정보를 보낼 수 있음
-React는 재사용가능한 component를 계속 만들 수 있음
-component간의 정보전달 가능(father가 children에게)
-ex) Food component 에 kimchi 라는 value로 prop name을 줌 <Food fav="Kimchi"/>
웹사이트에 동적 데이터를 추가하는 방법
(모든 components를 rendering + dynamic)
-javascript의 map사용 (**key값)
-map: function을 취해서 그 function을 array의 각 item에 적용
prop-types
father component로 부터 전달받은 props가 우리가 예상한 props인지 점검
prop-types 설치 : npm i prop-types
App.js 에 import PropTypes from "prop-types" 추가
Food.propTypes = {
name: PropTypes.string.isRequired,
picture: PropTypes.string.isRequired,
rating: PropTypes.number.isRequired
}
STATE
보통 우리가 동적 데이터와 함께 작업할때 사용 필수!
class App extends React.Component{ }state? object/ component의 data를 바꾸기 위해 사용
React는 render함수를 refresh하지 않음
Refresh하고싶을때? setState function
을 호출 →
React는 새로운 state와 함께 render function을 호출함
Component Life Cycle
리액트의 컴포넌트에는
render함수가 실행되기전에 구성되는 요소와 렌더링 이후에 작동하는 함수가 있다.
중요한 3가지
- Mountingconstructor( ) : component가 mount될때/screen에 표시될 때 호출componentDidMount( ) : component가 render됬는지(render함수 이후)
- render( )
- UpdatingcomponentDidUpdate( )
- Unmounting : component가 죽을때(다른 페이지로 가거나 ...)componentWillUnmount( ) (render함수 이후)
데이터 가져오기
Axios
npm install axiosfetch도 사용할 수 있지만 강의에서는 axios를 사용하였다.
Uploaded by Notion2Tistory v1.1.0