Don’t worry about failures

리액트 팀은 사용자의 경험을 증진시키기 위해 많은 연구를 한다. 이전 글에서 살펴보았던 동시성 모드, 서버 컴포넌트 등을 볼 수 있다. 해당 글에서는 리액트 서버 컴포넌트에 대해 알아볼 예정이다.  리액트 서버 컴포넌트를 살펴보기에 앞서 간단하게 렌더링에 대한 간단한 히스토리를 살펴보자.흐름에 따라 가다보면 리액트 서버 컴포넌트가 나오게 된 배경을 알게되고 이해하는 데에 도움이 되어 먼저 살펴보려한 것이다. 1세대 웹1세대 웹에서는 정말 정적인 웹페이지만 구현이 되었었다. 자바스크립트 없이 서버에서 HTML을 응답하여 브라우저는 그대로 뿌려주기만 한 시대였다. 이 때문에 사용자간의 상호작용이 별도로 존재하지 않았다.  진정한 서버사이드 렌더링이다.  2세대 웹자바스크립트가 등장하면서 웹은 더욱 발전했다...

리액트 18버전부터 등장한 개념으로 리액트에서 concurrent(동시성)에 대해 몇년동안 연구하고 분석한 결과 나오게 되었다. Concurrent React 자바스크립트의 특성상 싱글쓰레드로 하나의 작업씩 처리가 된다. 렌더링 작업이 일어나고 있을 때 다른 작업을 진행못하고 blocking되는 현상이 존재한다. 하지만 우리는 평소에 과한 렌더링 작업이 없기에 느끼지 못할 수 있다. 간단한 테스트를 해보자. input을 통해 들어온 값에 따라 1000개의 element가 새롭게 들어온다고 해보자 간단하게 아래와 같이 작성후 const [array, setArray] = useState([]); const inputHandler = useCallback((e) => { const inputValue = e..

react query를 간단하게 사용하면서 의문점이 생겼다. useQuery를 사용했을 때 reload을 했을 때 다시 api 요청을 했다. 이에 대해 궁금증이 생겨서 stackoverflow에 글을 남겼고, 이는 in-memory라는 것을 알게 되었다. 이를 기반으로 더 알아보고 좋은 글이 있어 번역을 기반으로 글을 작성해본다. 리액트 쿼리는 개발자 경험과 사용자 경험을 좋게 하기 위한 caching layer이다. 이는 in memory 캐쉬이며, 서버 없이, 브라우저 캐쉬와 관계 없이 처리되는 캐쉬이다. 나도 그러하고, 아마 많은 개발자들이 초기의 요청만하고, 그 이후에 캐쉬된 데이터를 제공 받기를 기대하며 이를 생각한다고 생각한다. 이 때문에 나 또한 의문을 가지고 찾아보기 시작한 것이다. Rea..

사이드 프로젝트를 하면서 react query를 적용해보기로 했다. 적용하게된 계기 1. 캐싱 작업 2. 서버 상태 관리 위와 같은 이유로 해당 라이브러리를 찾아보기 시작했다. 1. react query 2. swr 3. apollo 위와 같은 라이브러리가 존재했다. 모든 라이브러리를 비교 분석하기엔 어려움이 있었기 때문에. 간략하게 비교 분석이 된 것을 보고, react query를 선택했다. 그리고 이를 계속해서 파악해보았을 때 적용하는 데에 부족함이 없다라고 생각했기에 택하게 되었다. https://react-query.tanstack.com/comparison 훅과 같이 리액트 스럽게 사용할 수 있는 장점. 손쉽운 키로 캐쉬 관리 및 업데이트 등과 함께 서버 상태 관리를 직관적으로 표현. 이러한 ..

리스트와 Key 리액트에서 엘리먼트를 배열로 만들어 렌더링을 할 수 있습니다. 여기서 map()을 통해 렌더링을 돕는다. 예제는 위와 같다. 여기서 컴포넌트, 즉 함수로 따로 빼서 할 수도 있지만 인라인으로써 다음과 같이 map을 사용할 수 있다. 리액트에서 반복문을 통해 렌더링 하는 방법이다. 여기서 주의해야할 점은 바로 key이다. key 값을 제공하지 않으면 콘솔에서 경고를 뿜어낸다. key를 통해 항복을 변경, 추가, 삭제 등의 작업을 하기 위한 식별자로 사용되기 때문이다. 동일한 엘리먼트가 반복되는 만큼 이를 식별하는 것은 렌더링에 있어 필수로 잡는 것이다. key 값으로 할당하는 값은 보통 id 값으로 할당을 하지만, 어쩔 수 없는 경우 index 값으로 할당하게 된다. index로 할당할 경..

이벤트 처리하기 1. camelCase 형태의 이벤트 ex ) onClick 2. JSX를 사용하여 문자열이 아닌 함수로 이벤트 헨들러 전달 ex ) onClick={activateLasers} 3. return false를 통한 기본동작 방지X => e.preventDefault를 명시적으로 호출 필요 4. react에서 전달된 e는 합성 이벤트 => react는 W3C 명세에 따라 합성 이벤트를 정의, 브라우저 호환 걱정 X 5. onClick을 통해 전달된 이벤트에서 this는 바인딩X => 호출 시 onClick={this.handleClick} 형태로 호출해야한다. 6. 인자 전달하기 6-1 onClick={(e) => this.deleteRow(id, e)} 6-2 onClick={this.d..

State and Lifecycle Lifecycle 리액트는 클래스형 컴포넌트와 함수형 컴포넌트가 존재한다. 각각의 라이프 사이클에 살펴보자. 우선, 클래스형 컴포넌트를 보면, componentWillMount() {} componentDidMount() {} componentWillReceiveProps(nextProps) {} shouldComponentUpdate(nextProps, nextStatus) { return true / false; } componentWillUpdate(nextProps, nextState) {} componentDidUpdate(prevProps, prevState) {} componentWillUnmount() {} 여기서 리액트 17부터는 componentWil..

처음 리액트를 접하면서, 가장 당황했던 부분이 리렌더링이다. 변수를 새롭게 할당해줄 때마다 해당 컴포넌트가 리렌더링되고, 상태관리를 제대로 못해주게되면 모든 컴포넌트가 리렌더링이 발생되는 상황이 생길 수 있다. angular와 다른 경험이라 매우 당황했다. 상태를 수정할 때 이러한 경험을 하지 못했기 때문에 더욱 크게 다가왔다. 이 생각은 많은 사람들이 다루었고, 불필요한 곳에서 리렌더링이 발생되지 않도록, 최적화를 많이 시킨다고한다. 이를 더해 불변성을 유지해주고, 최적화를 도와주는 라이브러리를 도입하여 개발의 편의를 더해주고 있다. ex) immer, immutable (앵귤러에서도 사실 이런 이슈가 있을 수도 있지만, 내가 모르는 것일수도,,) 그렇담 왜 불변성을 추구하고자할까 우선 이에 앞서 자바..