본문 바로가기

React58

React 4일차-create react app 기본 오늘은 새로운거다 실전과 관련된 것이다 기쁘다 ㅎㅎ 우선 바탕화면 빈곳에서 우클릭 code(으)로 열기 클릭 상단에 터미널 클릭해서 새 터미널 클릭 밑에 이창이 뜨면 성공 이제 내가 말하는것은 여기에다 입력하면된다 npx create-react-app 저장할폴더명 하고 엔터 폴더명은 있는거하면 그안에 만들어지고 없는거 하면 폴더도 같이 만들어진다. 그러면 이렇게 된다 이제 cd 설치한폴더명 하고 엔터 그다음 code . -r 하고 엔터 C:\Users\ko022\Desktop> 가 C:\Users\ko022\Desktop\설치한 폴더명> 이런식으로 바뀐다. 하면 이런식으로 창이 바뀔것이다. 그러면 위에처럼 새터미널 열어주자 이제 이거다 터미널에 치고 엔터하면 된다 하나씩 알아보자 npm start 개발자.. 2022. 1. 23.
React 4일차-16.3v이후 라이프 사이클 16.3v이후 라이프 사이클에 대해 알아보자 똑같이 스크립트 버전에 다지우고 복사 붙여넣기하자 let i=0; class Com extends React.Component{ state={ list:[] }; interval=null; constructor(props){ super(props); console.log('constructor') }; render(){ console.log('render') return ( {this.state.list.map((i)=>{ return {i}; })} ); }; static getDerivedStateFromProps(nextProps,prevState){ console.log('componentWillMount',"componentWillReceiveProp.. 2022. 1. 23.
React 4일차-16.3v 이전 라이프사이클 오늘은 라이프 사이클에대해서 알아보겠다. 우선 라이프 사이클이 무엇인지 알아보자. 한국어로 번역하면 삶의 순환 이다 즉 자연계순환처럼 생겨나고 죽기까지 과정의 과정을 알아보는것이다. 컴포넌트의 라이프 사이클은 컴포넌트의 순환체계이다 이게 언제 만들어지고 언제 우리눈에 보여지고 언제 데이터가 옮겨지고 등등 의 순서를 알아보는것이다. 즉 라이프 사이클은 순서를 알기위한 개념이다. 우선 평소처럼 스크립트에 내용 지우고 복사 붙여 넣기하자 class Com extends React.Component{ state={ age:39, }; interval=null; constructor(props){ super(props); console.log('constructor',props) }; render(){ conso.. 2022. 1. 23.
React 3일차-Event Handling 오늘은 이벤트핸들링 에 대해서 해보자 오늘은 주말이라 거진 저녁 8시부터 공부를 시작해서 양이 얼마 안된다.... 자 평소처럼 npx serve로 localhost 열고 script에 이거 넣어주자 //함수로 구현 // function Component(){ // return( // // {console.log("clicked")}}>클릭 // // ); // } //클래스로 구현 class Component extends React.Component{ state={ count:0, } // render내부에서 함수정의 // render(){ // return( // // {this.state.count} // { // console.log("clicked") // this.setState((pre) =.. 2022. 1. 22.

티스토리툴바