본문 바로가기

리액트21

리액트에서 setState를 통해서 state를 변경해주는 이유 / setState의 비동기성 리액트를 사용하면서 처음에는 없던 의문이 갑자기 생겼었다. 왜 리액트는 useState라는 훅을 사용해서 상태관리를 하는것인가 물론 훅을 사용해서 라이프사이클을 조작할 수 있게 하여 불필요한 리렌더링을 막아주고, 내가 원하는 시점에 원하는 동작을 하도록 만들어주는 것일 거다. 하지만, 왜!! 자바스크립트에서 변수 사용하듯이 사용하면 안되는것이냐 이게 문득 궁금해졌다 이유 state는 immutable(불변성)을 유지해야하기 때문이다. 컴포넌트는 현재의 this.state와 setState를 비교해서 업데이트가 필요한 경우에만 render 함수를 호출하는데, state를 직접 수정하게 되면 리액트가 render 함수를 호출하지 않아 상태 변경이 일어나도 렌더링이 일어나지 않을 수 있다. 상태 변경을 추적하.. 2022. 10. 21.

Redux 리덕스는 어렵다... Redux? 컴포넌트가 많을수록 복잡해지는 상태를 효율적으로 관리하는 라이브러리 why? 구조가 점점 복잡해지면서 부모 컴포넌트부터 최하위 컴포넌트까지 내려오면서 상태를 관리하는 것은 너무 비효율적! 리덕스로 바깥에서 상태관리를 해주면서 효율적으로 접근! 이해가 되지 않는다면 아래와 같은 상황을 보자! 👇 위의 컴포넌트 구조가 아래의 컴포넌트구조와 같이 복잡해졌다고 가정해보자. 이럴 경우, 최하위 자식 컴포넌트까지 상태를 전달해주거나 자식 컴포넌트에서 발생한 이벤트에 의해서 다른 루트에 있는 컴포넌트의 상태변화를 불러일으켜야하는 상태일 경우일 때 비효율적으로 작동하는 것을 볼 수 있다. How? 위에 제가 문제로 제시했던 상황들을 리덕스는 바깥에서 상태관리를 할 수 있도록 도와줌 리.. 2021. 7. 13.

[React] LifeCycle (라이프사이클, 생명주기) 웹을 공부하다보면 빠질 수 없는게 또 바로 라이프사이클이다. 지금까지 나는 라이프 사이클 개념만 공부를 해서 정확하게 어디에 쓰이고 내가 사용하면서도 이게 라이프사이클이 어떻게 사용되는지조차 정확하게 알지 못하고 넘어갔었는데 이번 기회를 통해 정확히 짚고 넘어가려고 한다. 일단, 구글에 react lifecycle이라고 치면 항상 나오는 그림이 있다. mount부터 unmount까지 좌르륵 있는 사진이다. 나는 그냥 이것만 공부하고 알고있었다. 근데 왜 라이프사이클에 대해서 알아야하는지 근본적인 부분에 대해 부족하다고 느껴서 이번엔 그 부분을 좀 더 자세히 알아보도록 해야겠다! 라이프사이클이란? 라이프 사이클은 간단히 워딩만 보더라도 '한 화면이 생성되고 사라지기까지의 과정'이라고 볼 수 있다. 왜 라이.. 2021. 7. 5.

[React] Rerendering(리렌더링) 리액트를 공부하다보면, 효율성이라는 단어를 빼놓을 수가 없는 것 같다. 저번에 정리했던 DOM에서의 가상 돔도 그렇고, 어떤 한 개념을 공부할 때마다 그 개념이 효율적이게 도와준다고 하는 것이 많다는것이다. 나는 전에 이런 질문을 받은 적이 있다. '리렌더링이 뭔지 아시나요?' 이 글을 보는 여러분들은 무슨 대답을 하겠는가? 나는 그때는 부끄럽지만 리렌더링이 그냥 렌더링을 다시한다는 거 아닌가? 이렇게 생각했었다. 사실 말 뜻은 그렇다. 하지만, 질문의 의도가 과연 진짜 뜻을 물어보는 것이었을까? 이때 모든 질문에 답을 개떡같이 한 나는 집에 와서 차분히 다 적어놨었다. 그리고 다시 공부하면서 채워나가기 시작했다. 리렌더링은 무엇인지 근본부터 알아야하며, 왜 이걸 알아야하는지, 어디에서 이 개념이 쓰이는.. 2021. 6. 24.

[React] ContextAPI를 사용해서 TodoList만들기(2) : contextAPI contextAPI에 대해서는 책 📖리액트를 다루는 기술📖에서도 다뤘지만 겉으로는 이해했지만, 몸과 마음 전체적으로 아직 이해를 못하고 깨닫지 못했다는 생각이 들어서 contextAPI를 사용한 예제인 투두리스트를 찾아서 다시해보게 되었다. 이번 포스트를 쓰면서 정한 내 목표는 이 포스트를 쓰면서 다 쓰고 나서는 내가 contextAPI가 뭔지 제대로 설명할 수 있고 알 수 있도록 만드는 것이다. 이전 포스트는 이 투두리스트를 만들면서 사용한 styled-components에 대한 요소들을 공부해본 포스트이다. minjoo-space.tistory.com/56 [React] ContextAPI를 사용해서 TodoList만들기(1) : styled-components 리액트를 다루는 기술에서는 투두리스트를.. 2021. 2. 9.

[React] BrowserRouter VS HashRouter BrowserRouter VS HashRouter 강의에서도 그렇고 책에서도 그렇고 라우터를 사용할 때 이때는 이 라우터가 좀 더 효율적이고,,,이런 말들이 많았다. 나는 이 설명들이 한 번에 이해가 안갔기 때문에 라우터에 대해서 정리해보려고 마음을 먹었다. 일단 이 무비 웹을 만드는데 비교했었던 라우터는 BrowserRouter와 HashRouter 이 두 개이다. 그래서 이 두개를 먼저 정리해보려고 하는데 이 사이트를 참고해서 작성해보았다. 위의 코드를 보면서 설명을 해보려고한다. Router 라우터에는 기본적인 라우팅 속성들만 정의되어있기 때문에 아래처럼 5가지 라우터를 사용하는 것이다. BrowserRouter HashRouter MemoryRouter NativeRouter StaticRoute.. 2021. 2. 4.

이전 1 2 3 4 다음

티스토리툴바