React (24) Today I am Lifecycle Methods to Class mounting - 처음으로 DOM에 rendering될 때 componentDidMount( ) unmounting - 생성된 DOM이 제거 될 때 componentWillUnmount( ) the component Lifecycle (자주 사용되는 Lifecycle위주로 작성됨) Mounting - 구성 요소의 instance를 만들고 DOM에 삽일 할 때 아래 순서로 호출 constructor( ) render( ) componentDidMount( ) Updating - props, state의 변경으로 인행 발생. 해당 메서드는 구성 요소가 다시 rendering될 때 아래 순서로 호출 render( ) componentDidUpdate( ) Unmounting - 구성 요소가 DOM에서 제거 .. react 추가 study ⭐ class 방식으로 react 코드 짤때, 실무에서 constructor,super 생략하고 state만 더 자주 사용한다 class GuGuDan extends React.Component{ contructor(props){ super(props); this.state = { first: ~ , second: ~ , } } } //실무에서는 생략 후 아래 방법을 더 많이 쓴다 class GuGuDan extends React.Component{ state = { first: ~ , second: ~ , } } ⭐ render함수 내부에서는 function을 사용해도 되지만, class 내부에서 메서드를 만들어서 사용할때는, arrow function을 사용해야한다. (render내에서 onsubmi.. setup / props / state / data fetch | NomardCorder react setup react app 만들기 react app 파일 열기, github 업로드 window+r 로 cmd창 열기 cd documents로 documents 이동 → code movie-app/ 명령어 작성으로 vscode폴더 열기 readme 간단히 작성 후, package.json에서 test, eject는 신경쓰지 않는다(삭제) + 등등 필요없는 파일 삭제 github에 업로드 +용어 ) pubilc의 favicon = 웹 탭의 상단에 보이는 아이콘 How does React work? 애플리케이션이 화면을 로드할 때, 빈 html을 로드하게 되고, react가 component에 작성해둔것을 html에 밀어넣게 된다. -> 소스코드가 보이지 않음 -> v.. Update, Delete 기능 구현 CRUD = Create Read Update Delete update는 read기능과 create기능이 결합되어있다고 볼 수 있다. - 기존 컨텐츠를 불러와서 form에 추가작업 할 것 - form기능이 이미 구현되어있는 컨텐츠에서 실행할 것 Update state값을 form과 동기화시켜서 state값을 계속 변화시키기 //Components/UpdateContent.js import React, { Component } from 'react'; class UpdateContent extends Component{ constructor(props){ //가변적 데이터로 동작할 수 있게 -> state화 시켜주기 super(props); this.state = { title:this.props.data.. Component 이벤트 만들기 1) subject의 링크 클릭시 이벤트가 실행되게 하기 header에 직접 클릭 이벤트를 넣고 header를 다시 subject componenet로 패키징할 것 ( bind, setState 사용) ◎우선 빠른이해를 돕기 위해 단순화하여 sub파일을 주석으로 하고 내부 내용을 바깥으로 옮겼다. ↓ - setState함수 사용 - bind함수 사용 - bind (this)를 넣어서 강제로 this를 주입해서 this를 공유할 수 있게 해줌. bind 함수 예시) let obj = {name:'egoing'}; function bindTest(){ console.log(this.name); } bindTest(); //undefined let bindTest2 = bindTest.bind(obj); bi.. props / state props / state props - 사용자가 component를 사용하는 입장에서 중요한 것 - component 의 기본적인 동작을 바꾸고 싶을 때 props - component 사용자에게 중요한 정보 - component를 사용하는 외부의 props state - props의 값에 따라서 내부의 구현에 필요한 데이터가 state다 - component 내부적으로 사용되는 것들 - 실제로 구현하는 내부 - state - 실제로 component를 구현할 때 좀 더 복합적으로, 다양하게 일을 하는 component를 만들때 필요한 필수적요소인 - state 리액트에서는 props의 값이나 state값이 바뀌면 render가 다시 호출되면서 화면이 다시 그려진다 1. App이라는 component에 .. Component 제작 ⭐ 1. component 만들기 - 보통 HTML 코드 작성 시 web world wide web! html css javaScript html html is HyperText Markup language. ↓ - class 내부로 넣어서 component 생성 import React, { Component } from 'react'; import './App.css'; class Subject extends Component{ render(){ return( web world wide web! ); } } class TOC extends Component{ render(){ return( html css javaScript ) } } class Content extends Component{ rend.. React 개발환경 구축하기 component의 장점 1. 가독성 2. 재사용성 - component 화 3. 유지보수 공부전략 코딩 -> 실행 -> deploy 공식문서에 익숙해지기 📝 개발환경 원래 리액트 앱을 처음 실행하기 위해서는 webpack이나 babel같은 것을 설정하기 위해 많은 시간이 걸렸다. babel = 최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해서 최신 자바스크립트 문법을 구형 브라우저에서도 사용할 수 있도록 변환시켜준다. webpack = 웹사이트들이 커질수록 라이브러리, 프레임워크를 사용하면서 복잡하게 됐는데 이를 번들 시켜줘서 묶어준다, 많은 모듈을 합해서 간단하게 만들어준다. but, 이제는 create-react-app command로 바로 시작할 수 있다. npm = Node.js로 만들.. 이전 1 2 3 다음
