개발자가 되는 과정

React 성능 개선 방법 1. 리액트의 작동과 Shallow Comparison React에서의 작동 React에서는 업데이트 될 때마다 렌더링을 진행하고, VDOM에서 필요한 요소만 확인하여 실제 DOM에는 필요한 것들만 렌더한다. 그래서 업데이트 될 때마다 리액트는 렌더링이 진행되도 html 전체가 렌더링 되는 것이 아니라 필요 부분만 렌더링 되기 때문에 개선된 성능으로 렌더링되어 화면에 나타나는 것이다. 하지만, 업데이트 시 클래스형 컴포넌트 내부의 render메서드나 함수 컴포넌트등은 호출이 계속된다. 이것은 shallow comparison(얕은비교)를 시용하여 성능을 좀 더 개선할 수 있다. shallow comparison를 활용하면 object의 최상위 데이터(props나 state)가 ..

React _ API를 사용하여 외부 데이터 받아오기 1. DI (Dependency Injection) DI란? 의존성 주입이라고 불리며, 의존하는 객체를 분리하여 주입한다. 기존에 a의 내부에 있는 b는 c,e 등에 관계 의존성을 가지고 있다. 하지만, 의존성주입을 사용하여 b를 a로 부터 분리하여 주입하면(의존관계 역전, 의존성의 분리) c,e는 a에 주입된 b와 관계성이 형성되므로 b자체 보다는 a와의 관계에 신경쓰면 된다. DI의 장점 (기능 단위로 분리된다) 테스트가 용이하다 코드의 재사용성을 높여준다 객체 간 결합도를 줄여준다 가독성이 좋아진다 활용 외부와 통신하는 API를 연결할 때, 그 역할만 수행하는 클래스를 생성하여 따로 관리가 가능하다. 따라서, 여러 API를 추가하거나, 수정시 분..

React - LifeCycle and Hooks 1. LifeCycle 리액트에서는 컴포넌트가 처음 나타날때 및 변경될 때마다, render를 다시 한다. render 되는 과정을 나타내는 것이 lifecycle이다. 가장 많이 사용하는 lifecycle의 단계 componentDidMount : 컴포넌트의 인스턴스(데이터)가 생성되어 DOM 상에 삽입되어 렌더링 된 후 : fetching, animation, subscribing(구독) componentDidUpdate : props 또는 state가 변경되어 다시 렌더링 된 후 : condition을 넣어주지 않으면 무한반복됨 componentWillUnmount :컴포넌트가 DOM 상에서 제거될 때 : unsubscribing(구독해제) life..

리액트를 사용하는 이유 UI를 생성하는데 있어 버그를 최소화하기 위함 UI의 구성요소를 component 요소로 쪼개어 각각이 논리적 역할을 하여 UI 디자인에 더 집중할 수 있게 함 주요개념 : Components and Props Components는 UI를 독립적이고, 재사용가능한 요소로 쪼갠 것 component는 import, export를 통해 연결 Class component (js 내용 참고) Function은 호이스팅이 되지만 Class는 호이스팅이 되지 않음 렌더할 내용을 render(){ ... } 내부 메서드를 통해 return 해줌 state, lifeCycle 관련 사용가능 this.props, this.state 등 this를 붙여 사용 constructor 내부에 super(..