# shouldComponentUpdate

hyeonwoody

서론 BubblePop 프로젝트 중 사용자 키보드 입력을 화면에 말풍선 안에 보여줘야 합니다. 그런데 'ㄱㄴㄷㄻㅄ'를 입력하기 위해 한글자씩 입력할 때마다 커서가 텍스트 앞으로 가면서 'ㅅㅂㅁㄹㄷㄴㄱ'가 입력되게 됩니다. 입력의 역순으로 텍스트가 보이게 되는 셈이죠. 본론 소스코드 의심이 가는 코드 부분입니다. 아무래도 컴포넌트에 focus를 하면서 커서가 앞으로 이동하는게 아닌가 싶은데요. 그래서 input에 있던 값을 변수에 저장 input에 focus 해주고 input의 va

cptkuk91

lifecycle methods in React. > React Component의 생명주기 Method는 특정 순간에 자동으로 호출되는 Method입니다. componentDidMount: Component가 처음 Rendering 될 때 DOM에 추가된 후 호출됩니다. shouldComponentUpdate: Rendering 전 호출되어 Rerendering 필요한지 판단 후 호출됩니다. componentDidUpdate: Component가 갱신되어 Rerendering 후 호출됩니다. componentWillUnmount: Component가 DOM에서 제거되기 전 호출됩니다. getDerivedStateFromProps: Rendering 전 호출되어 Component의 상태를 props를 기반으로 업데이트할 수 있습니다. getSnapshotBeforeUpdate: Rendering 전 호출되어 Component가 DOM

cmaw

앱 개발을 하면서 렌더링 되기 직전 이나 새로 변경된 후 특정 작업을 수행해야 한다면 life cycle 은 확실히 잡고 넘어가는 것이 좋을 것이다. React 의 component Life Cycle 은 크게 3단계로 분류가 가능하다. Mount → Update → unMount 단계이다. > 1. Mount Mount는 Dom 객체가 생성되고 브라우저 상에 나타나는 것을 말한다. Mount 의 함수 호출 순서이다. constructor component class 의 생성자 함수로 component 를 만들 때 처음으로 호출되

leegaram

State and Lifecycle > 각 컴포넌트는 상위에서 하위 컴포넌트로 값을 전달하여 사용할 수 있는데, 이 때 이 전달되는 값을 props 라고 한다. state는 각 컴포넌트가 가지고 있는 개별적인 상태값이다. props는 부모 구성요소에서 설정한 정보를 포함하며 변경할 수 없는 불변성의 특징이 있다. state는 자체적으로 초기화, 변경 및 사용할수 있는 정보를 포함하고, setState를 통해 변경이 가능하다. props는 함수의 매개변수처럼 컴포넌트에 전달되어 불변하고, state는 함수 내에 선언된 변수처럼 컴포넌트 안에서 관리되어 변경이 가능하다

qortmdalsdl

그 어떤 개발을 할 때에 최적화 라는 것은 필수 요소이다. React에서는 렌더링 최적화를 위한 설정과 기능들을 제공하고 있는데, https://blog.bitsrc.io/10-ways-to-optimize-your-react-apps-performance-e5e437c9abce 을 참고하여 React의 렌더링 최적화를 공부하며 정리한다. Windowing List를 구현할 때, List 내부의 서버에서 받아오는 데이터가 많으면 초기 렌더링 시에 성능이 저하가 된다. 따라서 이와 같은 경우에는 1페이지 10개 출력, 2페이지 10개 출력과 같이 페이지별 관리를 하여 최적화 할 수 있다. 하지만 이와 같은 페이지별 관리는 서버에서의 작업이 필요하다. 10개만 요청했을 때, 서버가 10개만 response를 해줘야 하기 때문이다. 이와 같은 상황에 대중적으로 사용되고 있는 react-window 라이브러리가 있다.

hyunn

사용자가 입력할 수 있는 input 태그의 상태를 관리하는 방법을 다루어 보겠다. input 상태 관리하기 input 에 입력하는 값이 하단에 나타나게 하고, 초기화 버튼을 누르면 input 의 값이 비워지도록 구현하였다. InputSample.js App.js 기본 증감 코드 (+1, -1) 여러개의 input 상태 관리하기 input 의 개수가 여러개가 됐을때는, 단순히 를 여러번 사용하고 도 여러개 만들어서 구현 할 수 있다. 하지만 그 방법은 가장 좋은 방법은 아니다. 더 좋은 방법은 input 에 을 설정하고 이벤트가 발생했을 때 이 값을 참조하는 것이다. 그리고 에서는 문자열이 아니라 객체 형태의 상태를 관리해주어야 한다. 리액트 상태에

skwlalsl93

1. LifeCycle API(생명주기) 콤포넌트가 브라우저 상에서 1) 나타날 때 2) 업데이트 될 때 3) 사라질 때 사용됨. 각 생명주기 단계별로 종류가 다양하다. 외우지 말고 필요할 때 매뉴얼에서 찾아서 쓸 수 있으면 됨 각 단계별로 존재하는 함수를 호출해 사용하면 됨. 1-1. Mounting 컴포넌트가 브라우저 상으로 나타날 때 1) constructor 생성자 함수. 만든 컴포넌트가 브라우저 상에서 나타날 때 가장 먼저 실행되는 함수. 주로 컴포넌트가 가지고 있을 state의 초기 설정 또는 컴포넌트가 만들어지는 과정에서 먼저 처리가 돼야 하는 작업이 있을 경우 실행됨. 2) getDerived