본문 바로가기

전체 글84

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

CSR vs SSR CSR 과 SSR 의 차이를 학습할 때는 필수적으로 SPA와 MPA에 대한 이야기가 먼저 나와야한다. 해당 부분에 대한 내용은 아래 링크를 참고해보면 좋을것같다. 이제 본격적으로 CSR과 SSR에 대한 얘기로 넘어가보자. 찾아보면 CSR은 SPA와 연결지어서 많이 설명이 되어있고, SSR은 MPA와 엮여서 많이 설명이 되어있다. 예전에는 이것만 보고 그럼 서로서로 같은 개념인가?라는 생각을 했었는데 아니다. 명심할 것은 CSR이 전부 SPA방식이 아니라는 점! 그렇다면 csr, ssr이 무엇인지 알아보도록 하자! CSR(Client Side Rendering) 클라이언트 사이드 렌더링. 말 그대로다 클라이언트 쪽에서 렌더링이 일어난다는 얘기다. 요청을 보내고 -> 응답을 받고 -> 그리고 이 과정 반복 .. 2022. 1. 2.

URI와 URL의 차이점 프론트 개발을 공부하는 사람으로써 Restful API에 대해서 대략적으로는 알아야한다고 생각된다. restful api에 대해서 공부를 하다가 URL, URI 용어가 혼용이 많이 되는 걸 보면서 혼란스러웠다. 도대체 둘이 뭐가 다른거지...? 뭔가 애매하게 넘어가는게 찝찝해서 한번 찾아봤다 URI (Uniform resource Identifier) 인터넷 상에서 특정 자원(파일)을 나타내는 유일한 주소 자원의 id -> 유일해야함 URL (Uniform Resource Locator) 통합 자원 식별자로 인터넷에 있는 자원을 나타내는 유일한 주소 URL은 특정 서버의 한 리소스에 대해 구체적인 위치를 서술 정리된 글들을 보고 정리하면서 내가 이해한 것은 (틀릴수도 있다) 우리가 흔히 도메인으로 생각하.. 2021. 10. 11.

[라이징캠프] 웹리더 트랙 수료 후기 🤔의식의 흐름대로 흘러감 주의,, 그냥 다들 제 흐름에 타서 읽어주세요...! 라캠수료후기인데...이제 투머치토커를 곁들인... 수료하고 그때 떠올리면서 후기쓰니까 뭔가 아련해지네요....🥺 때는 바야흐로... 6월 첫 주.. 그 당시 몇 일전 스타트업 인턴 면접을 좋은 기회에 보게 됐었고, 생략하자면 뭐 떨어지는 건 사실 상관이 없었는데(학교를 다녀야한다는 합리화) 면접에서 말도 안되는 대답들을 하고 와서 면접을 그렇게 보고 왔다는 게 너무 창피하고 자괴감이 왔었다. 진짜 단순과 행복빼면 시체였던 사람이었는데 그때 충격이 어지간히 컸던지 멘탈이 완전히 나가서 이틀을 이불킥하면서 잠도 제대로 못자고 제대로 먹지도 못하고 다음주였던 기말시험공부도 못했다. (포맨의 못해 틀어주세요...) 아물론, 이틀뒤에 .. 2021. 9. 18.

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

[React] useEffect useEffect를 좀 더 집중적으로 다뤄볼만한 가치가 있다고 느꼈다. 이는 라이프사이클과 직결되어있기 때문에 더 정확히 알고 사용해야겠다고 생각하면서 다시 리다기 책을 오랜만에 펴서 살펴보았다. UseEffect useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 훅이다. componentDidMount + componentDidUpdate componentDidMount + componentDidUpdate + componentWillUnmount 마운트 될 때만 실행하고 싶을 때 (ComponentDidMount) useEffect(() => { console.log('마운트될때만'); },[]); 컴포넌트가 화면에 맨 처음 렌더링 됐을 때만 실행하고 싶을 .. 2021. 7. 6.

이전 1 2 3 4 5 6 7 8 ··· 14 다음

티스토리툴바