React Component 의 Lifecycle
컴포넌트를 class 로 생성하면 아래의 순서를 따라서 진행된다
1 component 호출 | 2 constructor (초기 세팅값) | 3 render (화면에 보여짐 - 초기값) | 4 componentDidMount (데이터를 구독, 외부에서 데이터를 불러오기 적절한 위치이다) 새로운 상태가 업데이트 됨 (새로운 props 나 setState 로 state 변경) | 5 componentDidUpdate (컴포넌트가 갱신 되었을 때, 이전과 현재의 props 를 비교할 때 사용하면 좋다, 따로 정의하지 않으면 render() 호출) | 6 componentWillUnmount (데이터 구독 해제)
http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
call, bind
call 은 함수를 실행 할 때 함수의this 를 바꾼다
bind 는 해당 함수의 this 값을 영구적으로 바꾸는 새로운 함수를 만든다
console.log(sum.call(kim, '=> '));
let newSum = sum.bind(kim, '= ');event
리액트 요소에 이벤트를 추가할 경우 bind(this) 를 해줘야 한다
react review
component 는 재사용이 가능한 ui 단위이다 컴포넌트는 부모쪽에서 Input 을 받아서 return 할 수 있는데 이 input 을 props 라고 한다 props 는 .으로 접근 가능하다
function NewHi(props) {
retrun(
<h1>Hi { props.name }!</h1>
)
}
function App() {
return(
<NewHi name="Pin" />
)
}
export default App;
// Hi Pin! 출력state 는 component 의 상태값이다 state 는 컴포넌트 안에서 정의되고 사용된다
class NewCom extends React.Component {
constructor() {
super()
this.state = {
hi : "Hi!!!!!"
}
}
render() {
return(
<h1>{this.state.hi}</h1>
)
}
}props 와 state 둘 다 object 이다
component 는 class 와 함수로 만들 수 있는데 상황에 따라 만들면 된다
class 로 만든 컴포넌트는 render() 안에 return이 들어있다 render()는 필수요소이다
class 컴포넌트이름 extends React.Component {
render() {
return();
}
}리액트
프레임워크는 기본 틀이 있고 그 안에서 개발자가 코드를 쓰는 것이다
틀 안에서 틀 안에 없는 기능들을 끌어다 쓰는데 그 끌어오는 기능들을 라이브러리라고 한다
jsx는 자바스크립트 확장 문법을 말한다
MVC (model view controller)
vue 와 angular 는 model view controller 세가지를 포함하는 프레임워크이다
리액트는 오로지 view 로만 이루어진 자바스크립트 라이브러리이다
node 자바스크립트가 브라우저밖에서도 돌아갈 수 있게 만들어주는 환경
npm node package manager node에 필요한 패키지들을 관리해주는 매니저
CRA(create react app)
cra 에 설치된 패키지들이 node 기반이기 때문에 node 와 npm 이 필요하다
node modules 패키지가 들어있는 폴더 실제 소스코드가 담겨있음
package.json
- 프로젝트에 대한 meta data 들
- dependencies 패키지의 이름과 버전 정보가 나타나있음(내가 추가한 패키지가 나타남)
- 깃에 올려서 팀원들과 공유
- script 에는 명령어들이 들어있음 (start 는 개발모드로 실행 build 는 배포할 때 쓰는 명령어)
gitignore 깃에 안 올릴 것들 (예를 들어 node modules)
스타일 관련된 파일은 제일 마지막에 import
index.js
- 'ReactDOM.render(화면에 보여주고 싶은 요소, 위치);'
App.js - 'export default App;' 다른 파일에서 import 하기 위해서 export 해야 함
