React21 [React] useState와 객체 데이터를 사용해서 map 함수 작성 오랜만에 신발을 구매했다고 하더라도 남아있는 이 공허함은..... 비구조화 할당...? useState, 객체 데이터, map 이 셋의 삼각관계를 은밀히 알아보겠다... 실제로 사용해 보니 놀랍기도 하면서 굉장한 녀석들이었다...(feat. 갓민주님) (감동은 아님. 좀 힘들었음.) 각설하고 시작한다. useState의 강렬했던 첫인상 전에 간단하게 state에 대해 작성해 본 적이 있다. 아 물론 그땐 지금처럼 사용하진 않고 기본적인 지식과 작고 소중한 예제를 하면서 이해를 돕기 위해 적었던 글이 있다. 잠시 참고를 하실 분들은 하셔도 됩니다. 작고 소중한 state 아무튼 좀 더 심화과정이고 state의 값이 변경되기 위한 useState를 배워보는 시간을 가졌다. 처음엔 문법조차 생소했다. 도대체 .. 2023. 1. 17. [React] Side Effect / useEffect / Clean up Effect 부러질지언정 휘어질 수 없다. Side Effect 란? 이건 설명을 듣는 순간부터 헷갈렸다. 위에 말이 뭘 뜻하는가? 블로깅을 무조건 해야 한다는 말이다. 마음이 시키는 블로깅 됐고, 본론으로 들어간다. side effect란 함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 등의 행위를 말한다. 이렇게만 말해서 알아듣는 사람은 코딩 천재가 아닐까 싶다. 물론 난 천재는 아닌듯하여 예제까지 같이 적을 예정,,,, 예를 들어 함수에서 전역변수의 값을 변경하거나 혹은 함수 외부에 존재하는 버튼의 텍스트를 변경하거나, 파일을 쓰거나, 쿠키 저장, 네트워크를 통해 데이터를 송신하는 것 등이 있다. 좀 더 자세히 설명을 붙이자면 React 컴포넌트가 화면에 렌더링 된 이후에 비동기로 처리되어야 하.. 2023. 1. 17. [React] map 함수 적용시 key props를 부여하는 이유 날 죽여라 리액트 map 함수 적용 시 나오는 오류 map 함수를 생각없이 사용하다 보면 나오는 경고 창이 있다 Each child in an array should have a unique “key” prop. 너 key값 지정 안해줬음 너 동일한 형제들로 구성된 list(map에서 뿌려준 그 lists) 유니크한 키 prop을 줘야 함 이라고 말하고 있다. key 값이 왜 필요한데? 예를 들어 map으로 리스트를 하나씩 뿌려준다고 가정해 보자. 리액트는 내용이 바뀔 때 다시 렌더링을 해주는데 5개의 리스트 중에 하나의 리스트만 바뀌었다면 리액트가 하나씩 리스트를 읽다가 여기서 달라졌네?라고 파악한 뒤 전체를 재렌더링 하는데 그걸 방지하기 위해서 각각의 요소들에게 key값을 선물하는 것이다. 그렇게 되.. 2023. 1. 17. [React] React Router 비 좀 그만내려어어어어어어 제발 Router 란 ? (22.03.15 기준) 최근에 react-router가 v5에서 v6로 업데이트가 되었다! v6 기준으로 블로그를 작성할 예정이니 참고 바래용 Creat-React-App 줄여서 CRA에는 Routing을 하는 기능이 들어있지 않아서 가장 많이 사용하는 Routing-Solution인 react-router-dom을 추가해서 Routing을 구현한다. 사용자가 입력한 주소를 감지하는 역할을 하며, 여러 환경에서 동작할 수 있도록 여러 종유의 라우터 컴포넌트를 제공한다. 이중 가장 많이 사용하는 라우터 컴포넌트는 BrowserRouter와 HashRouter이다. BrowserRouter : HTML5를 지원하는 브라우저의 주소를 감지한다. HashRo.. 2023. 1. 17. 이전 1 2 3 4 5 6 다음 반응형
