* 이 글은 velopert.com/3631 을 공부하며 필요한 부분을 기록 정리한 글입니다. 렌더링 부분에서 오류가 발생하는 것 방지해 주는 방법 에러가 나는 경우 this.props.onClick(); // 존재하지 않는 함수를 호출시 에러 this.props.object.value; // object is undefined this.props.array.length; // array is undefined // 배열이나 객체가 존재하지 않을 때 해결법 1. undefined의 경우를 처리해준다 render() { if (!this.props.object || !this.props.array || this.props.array.length ===0) return null; // object 나 arr..
* velopert.com/3629 글을 공부하며 이것저것 해보며 정리한 글입니다 props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값 (직접 수정 불가, 부모한테 받은 함수props로 업데이트가능) state는 컴포넌트 내부에서 선언하며 값을 변경할 수 있다. 모든 것을 함수형으로 공부 중임 함수형 컴포넌트와 클래스형 컴포넌트의 주요 차이점은 state와 lifeCycle이 빠져있다는 것이다. 초기 마운트가 좀 더 빠르고 메모리 자원을 덜 사용한다는 장점이 있다. (*그보다는 나는 좀 더 짧고 간략히 작성할 수 있어서 좋다. 앞으로 리액트 개발이 함수형으로 된다는 것도 중요한 점이라고 생각한다) Name 컴포넌트를 만들어서 name props를 만들어서 전달해준다. ({name}) 이런 식으로 des..
* velopert.com/3626 에서 제가 필요하다고 생각하는 부분을 공부해 정리했습니다. react를 작성하다보면 조건에 따라 다른 부분을 리턴하도록하는 경우가 많다 자주 사용하는 방법은 1. 삼항연산자 2. &연산자이나 다른 방법이 궁금했는데 즉시실행함수를 사용하면 가능하다 { }안에 조건에 따라 다른 jsx를 리턴하도록 해준다 import React from "react"; const App = () => { const value = 1; return ( {(function () { if (value === 1) return 1; if (value === 2) return 2; if (value === 3) return 3; })()} ); }; export default App; switch ..
* velopert님글 누구든지하는 리액트 1편: 리액트는 무엇인가를 공부하며 정리한 글 출처: velopert.com/3612 페이스 북은 왜 리액트를 만들었는가 기존 다른 프레임워크들은 MVC, MVVM 패턴은 바탕으로 이뤄짐 공통점은 모델이다 (데이터) 대부분의 프레임 워크들은 양방향 바인딩을 통해 모델에 있는 값이 변하면 뷰에서도 이를 변화시켜준다 변화 (Mutation) 특정 이벤트가 발생하여 모델에 변화를 일으킬 때 어떤 DOM을 가져와서 어떻게 뷰를 업데이트할 지 로직을 정해줘야 한다 => 페이스북은 변화(Mutation)을 하지 말고 아예 기존 뷰를 날리고 새로 뷰를 만들어버림 하지만 진짜로 항상 view를 새로 만들어주면 성능 상의 부담이 있다 해결책은 virtual DOM 변화가 일어나..
* 이 글은 아래 글을 읽고 공부하면서 요약 정리한 글입니다 velopert.com/3236 virtual DOM의 작동원리를 이해하기 위해서는 브라우저 렌더링 과정에 대해서 이해해야 한다. 이전에 브라우저 렌더링 과정을 정리한 글이 있으니 한 번 읽어보자. 2020/09/17 - [FE면접준비] - 브라우저 렌더링 과정 리액트는 '뷰' 만을 담당하는 라이브러리이며 DOM에 변화가 생겼을 때 변경사항을 적용하는 것이 아니라 기존 뷰를 날리고 다시 새로운 뷰를 렌더링한다. 복잡한 Modification 작업을 하지 않아도 된다는 장점이 있지만 매번 뷰를 날리고 새로운 뷰를 렌더링하는 것은 부담이 클텐데 어떻게 리액트는 성능을 최적화하는 것일까? 리액트는 virtual DOM을 이용하여 DOM 조작을 최소화..
이 글은 아래 블로그를 참조해서 공부하면서 정리한 글입니다. 자세한 정보는 아래 글 참조 medium.com/@saturnuss/setstate-%EB%A5%BC-%ED%95%A8%EC%88%98%ED%98%95%EC%9C%BC%EB%A1%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-763402cbc3e5 setState 를 함수형으로 사용하기 리액트를 사용할 때 상태관리를 어떻게 해야할까? 그런데 상태 관리를 고민하기 이전에 무엇이 상태(state)고 어떤 것이 프로퍼티(props)가 되어야하는 것일까? 그리고 setState 어떻게 동작하는 것일 medium.com 리액트 상태를 업데이트 하기 위해서는 setState()메소드 호출한다 setState()는 업데이트 할 부분..