React Virtual DOM 작동원리 react는 뒤에서 실제 DOM을 모두 복사해서 virtual DOM을 만든다. 만약 리액트를 이용해서 virtual dom의 어떤 노드를 수정한다면 리액트는 새로운 virtual dom(updated virtual dom)을 만들고 이전 virtual dom 트리와 비교한다. 만약 일치하지 않는 노드를 발견한다면 리액트는 실제 dom 트리에서 해당 노드만 업데이트 시켜준다. https://youtu.be/RquK3TImY9U Virtual DOM이란 브라우저의 렌더링 엔진은 DOM 트리가 수정될 때마다 새로운 렌더 트리와 레이아웃을 생성하고 repaint 해야하기 때문에 동적 UI의 경우 성능이 저하될 수 있다. 이러한 이슈를 해결하기 위해 나온 것이 Virtu..

글을 추가하면 자동으로 새로고침 될 수 있도록 refresh 해보자 handlingSubmit에서 getPost를 하면 된다. 글을 삭제해보자 api.js에 deletePost를 추가해준다.App.js로 돌아와서 삭제 버튼을 만들고 onClick했을 때 handlingDelete가 동작 되도록 한다. handlingDelete = async (event) => { await api.deletePost(event.target.value) //delete 완료 후에 새로고침 되도록 동기화 시킴 this.getPosts() } render(){ return ( (내용 생략) this.state.results.map((post) => // 이거 안 감싸면 오류남 로 감싸도 됨 삭제하기 //글 삭제하기 delet..

글을 작성하고 제출하면 아래에 목록이 나오는 postView를 만들 것이다. posting section 만들기 글을 쓸 수 있는 폼을 만든다. input과 textarea에는 onChange 이벤트를 걸어서 value가 바뀔 때마다 바로 바로 값을 넣어준다. form 에는 onSubmit 이벤트를 걸어준다. handlingChange = (event) =>{ this.setState({[event.target.name]:event.target.value}) // 값이 변할때마다 setState } handlingSubmit = async (event) =>{ event.preventDefault() // event 기능 -> 막는다 let result = await api.createPost({titl..

hook? react 버전 16.8부터 새로 추가되었음 State를 쓸 수 없었던 function의 약점 보완 serState Import React, {useState} from 'react'; Const[상태명, set상태명] = useState(초기값) set상태명을 setState처럼 사용 State Stateless Function ○(hook) ○ Class ○ ○ 리액트 구조 간략히 리액트 구조를 확인해볼 수 있는 사이트 https://divjoy.com/

Life Cycle ? 컴포넌트의 요람에서 무덤까지 컴포넌트가 계속 변화하기 때문에 중요 핵심 4가지 Contructor State 구조 설정 컴포넌트가 Mount 하기 전에할 설정 setState X CompopnentDidMount 필요한 데이터 요청 각종 비동기 요청 (Subsription) ComponentDidUpdate 업데이트 이후 수정할때 If(){ setState() } //무한 반복 방지를 위해 조건문을 적용 ComponentWillUnmount 데이터 요청, 비동기 함수, 타이머 종료 -> data leak 방지 *setState X * console.log로 살펴보기 앞서 수정했던 App.js의 구조를 보면 다음과 같이 이루어져 있다. 자식 컴포넌트 :WorldClock 부모 컴포넌..

event? 웹 상에서의 모든 행위 React에서 이벤트를 나타내는 prop에는 on[Event] 이벤트를 처리하는 함수에는 handle[Event]\ 이벤트를 만드는 3단계 state 만들기 Handling 함수 만들기 이벤트가 발생하는 HTML 태그에서 on[Event]를 통해 handling 함수를 부른다. event를 활용해 stop 버튼 만들기 // 1단계 class WorldClock extends React.Component{ constructor(props){ super(props) this.state = { hour: this.props.time, minute : 0, stop: false, } //this.setState this.timer = setInterval(()=>{ this...

1. state 란 ? 각 컴포넌트들이 가질 수 있는 상태들의 집합 props를 통해서 자식 컴포넌트로 값을 넘길 수 있다 컴포넌트들마다 state는 있을 수도 있고, 없을 수도 있음, 남발하면 안 좋다는 뜻 props 만으로도 표현할 수 있는가? Render로 표시되지 않는 값인가? => 2개에 해당되지 않는다면 state로 원래 Fucntion는 stateless로 구분였지만 hook이 등장하면서 Function도 state를 쓸 수 있게 되었음 하지만 class를 이해해야 hook도 이해하기 쉬우므로 class 먼저 함 state를 사용하여 만들었던 WorldClock함수를 class로 만들어보자 단, 다음과 같은 요구 사항이 있음 요구사항 1. 시간과 분이 변화하는 것을 보고 싶다. 요구사항 2...

이전 글에서 만든 WorldClock 컴포넌트는 하나 추가할 때마다 일일히 태그를 작성해야되는 귀찮음이 있었다. 이를 해결하기 위해서 리스트로 간편하게 바꿀 수 있다. function App() { const cityTimeData = [ ['서울',10], ['베이징',9], ['시드니',12], ['LA',17], ['부산',10] ] const WorldClockList = cityTimeData.map((citytime,index)=> ) return ( Hello World {WorldClockList} } ); }결과가 동일하게 나오는 것을 볼 수 있다. 반복성 있는 컴포넌트에서 엘리먼트는 반드시 고유한 key를 가져야한다..