리액트 렌더링에 대해 다시 공부해보며 성능최적화 Hook의 개념을 공부해보았다. 먼저 리액트에서 렌더링되는 경우를 다시 짚어보면 아래와 같이 세가지의 경우가 있다. 1. 부모 컴포넌트가 렌더링된 경우 2. 컴포넌트의 state가 변경된 경우 3. 부모로부터 전달받은 props값이 변경된 경우 memo라는 함수는 컴포넌트에 변경된 사항이 없을 경우 불필요한 리렌더링을 막는 함수이다. 그런데 이러한 memo를 사용하더라도 아래와 같이 props를 넘겨주는 컴포넌트가 있다면 그 props가 리렌더링됨에 따라 재생성되므로 어쩔 수 없이 리렌더링되는 문제가 있다. 그래서 props로 함수를 넘겨주는 경우에는 useCallback을, 객체나 배열을 넘겨주는 경우에는 useMemo를 사용하여 의존성 배열안의 값이 바..

내가 짜야하는 게시판 구조는 들어가자마자 보이는 전체 게시판 /board 자유게시판 /board/free 알바고민 게시판 /board/partTime 대타 구해요 게시판 /board/cover 이었다. 여기서 들어가자마자 보이는 전체게시판에서 select의 option을 변경하여 다른 게시판으로 페이지가 넘어가는 것이다. 이 부분은 nested router와 Outlet을 사용하여 처리해주었다. 또한 전체게시판 페이지에서 const boardMatch = useMatch("/board”);를 사용하여 boardMatch가 null이면 전체게시판이 아니라는 것이므로 null이 나오도록하고 boardMatch가 null이 아닐 시 전체게시판이므로 전체게시물에 해당하는 게시물 카드들이 나오도록 하였다. + 리..

일단 로컬스토리지에 토큰을 저장한 뒤에 토큰 값이 있으면 isLogin 변수를 true 혹은 false로 설정해주고 이것에 따라 로직을 다르게 설정 보통의 토큰이 만료된 경우 만료되자마자 따로 처리를 하는 것이 아니라, 어떤 기능을 클릭했을 때 로그인을 하라고 뜨게 만든다 -> 요즘에는 토큰 만료 시간을 거의 무제한으로 한다고 함, 굳이 신경쓸 필요 X false라면 상세페이지에 갔을 때, 하트를 누르면 로그인 하라는 alert를 띄우고 true라면 하트를 채워진 하트로 바꾼 뒤에 api호출을 하여 데이터를 바꾸라고 함!!! 즉 로그인한 경우 상세페이지에 들어갔을 때 get 요청 시 해당 유저가 좋아요를 눌렀는지 여부를 확인하는 불리언 값을 예를 들면 heartpush 같은 변수로 설정하여 받아온 뒤에 ..

setState의 함수형 업데이트방식 아래의 일반 사용법의 경우 setNumber(number + 1) 를 3번 호출했지만 number가 1씩 증가한다. 그 이유는 setState의 비동기적 특성 때문이다. 리액트가 효율적으로 렌더링하기 위해 여러 개의 상태 값 변경 요청을 batch(일괄 처리) 처리하기 때문이다. 구체적으로는 setState가 여러번 호출되면 인자로 전달된 각 객체를 추출하여 단일 객체로 merge 하는데 이런 과정은 '오브젝트 컴포지션' 이라고 한다 . batch 처리의 이유는 당연히 성능 이슈 때문이다. 리렌더링을 발생하는 setState가 일어날 때마다 리렌더링이 일어난다면 얼마나 많은 렌더링이 일어나겠는가? 그렇다면 setState를 사용하기가 두려워질 수도 있을 듯하다. //..

오늘은 어제 생겼던 hover에 대한 의문점에 대해서 이유를 찾게 되었다. css에서 사용하는 hover를 클래스에 적용할 때, 클래스명을 쓰고 띄어쓰기를 없이 ":hover"를 붙이면 해당하는 클래스에만 직접적으로 적용이 되는데, 클래스명 옆에 띄어쓰기를 한 칸 하고 ":hover"를 붙이면 그 클래스에 속한 자식 태그들에게 적용이 되는 것이었다!!! 이 부분이 너무 신기하기도 했고, 한편으로 hover를 적용할 때 버튼이 여러개면 클래스명을 부여하기 귀찮거나 ">"을 사용하여 자식 태그를 지칭하기 귀찮을 때 아주 간편하게 쓰기 좋은 기능이라고 생각했다. hover 띄어쓰기가 영향을 미치는 이유 | 코드잇 .submit-btn : hover{ box-shadow: 0 2px 4px 0 rgba(0, 0..

오늘은 항해99의 주특기 숙련주차 과제인 Todo 리스트 페이지를 리덕스와 라우터를 사용하여 만들기를 완료하였다. 입문 주차에는 그냥 useState로만 만들었는데 리덕스를 사용해서 전역으로 state를 관리하는 부분이 낯설면서도 생각보다 할 만했다. 사실 저번주 금요일만 해도 자바스크립트 문법 공부가 너무 힘들어서 (딥다이브를 괜히 건들였다...ㅠ) 울적했는데, 저번주 토요일부터 계속 리액트를 하면서 개발이 너무 재밌있었다. 어려운 문법 공부보다 구현하는게 나하고 훨씬 잘 맞는 것 같다. 잠을 많이 못잤는데도 개발만 하면 너무 재밌어서 졸리지도 않고 기분이 좋아졌다. 내 생각대로 잘 돌아가는 것도 재밌고, 잘 안돌아가도 여러번 시도끝에 성공해내는 것도 재밌었다.ㅎㅎㅎ아무래도 개발이 천직같다고 느낀 하루..

데이터 바인딩이란? 화면상에 보여지는 데이터(View)와 브라우저 메모리에 있는 데이터(Model)를 묶어서(Binding) 서로 간의 데이터를 동기화하는 것을 의미한다. 예를 들어서 HTML에서 서버 혹은 스크립트상에서 받아온 데이터를 화면상에 그려주고 있다고 가정을 했을 때, 해당 값이 변경이 될 경우 다시 HTML 상에 데이터(값)를 변경된 값에 따라서 맞추어 주는 동작을 '데이터 바인딩'이라고 한다. 단방향 데이터 바인딩 컴포넌트 내에서 '단방향 데이터 바인딩'은 Javascript(Model)에서 HTML(View)로 한 방향으로만 데이터를 동기화하는 것을 의미한다. [JS(Model) -> HTML(View)] 단방향 데이터 바인딩이기에 역으로 HTML(View)에서 JS(Model)로의 직접..

부모 컴포넌트 A와 자식 컴포넌트 B가 있습니다. 컴포넌트 A는 state로 {name: "르탄이"}를 가지고 있고, 자식인 컴포넌트 B에게 name 값을 넘겨주었습니다. 컴포넌트 B는 받아온 name을 화면에 뿌려주고 있습니다. 컴포넌트 A의 state가 {name: "진도사우르스"}로 바뀌었을 때, 어떤 과정을 거쳐 바뀐 값을 화면에 보여주는 지 라이프 사이클 흐름을 그려볼까요? 컴포넌트가 real DOM으로 re-rendering이 되기 전에 re-evaluate(재평가)를 거친다. 먼저 새로운 state인 {name: "진도사우르스"}를 가지고 해당 컴포넌트(함수) 재실행(re-run)한다. 그 과정에서 컴포넌트 내부 구조는 모두 재생성(re-creation)하게 된다. 그런 뒤에 react가 변..