Mo's Develog

리액트 18버전 이후부터 batch라는 기능이 추가되었습니다. batch는 React가 더 나은 성능을 위해 여러 개의 state 업데이트를 하나의 리렌더링 (re-render)로 묶는 것을 의미합니다. batch 이전 리액트는 여러 state가 변경되면 1. state1변경() 2. 재렌더링 3. state2변경() 4. 재렌더링 .... 이런 식이였다면 batch 이후 리액트는 여러 state가 변경되면1. state1변경()2. state2변경()3. 재렌더링...이런식입니다. 리액트18버전 이후부터 렌더링 성능이 저하되는 컴포넌트에서 쓸 수 있는 혁신적인 기능이 하나 추가되었습니다. useTransition 이건데 이걸로 오래걸리는 부분을 감싸면 렌더링시 버벅이지 않게 해줍니다. 실은 코드 실행시..

컴포넌트가 재렌더링되면 거기 안에 있는 자식컴포넌트는 항상 함께 재렌더링됩니다. 리액트는 그렇게 대충 무식하게 동작하는데 평소엔 별 문제가 없겠지만 자식컴포넌트가 렌더링시간이 1초나 걸리는 무거운 컴포넌트면 어쩔 것입니까. 부모컴포넌트에 있는 버튼 누를 때 마다 1초 버벅이는 불상사가 발생합니다. 그럴 땐 자식을 memo로 감싸놓으면 됩니다. 테스트용 자식 컴포넌트 하나 만들어보기 Cart 컴포넌트 안에 Child 컴포넌트를 만들었습니다. 그리고 버튼누를 때 Cart 컴포넌트가 재렌더링되게 만들어놨는데 이 경우 이것도 재렌더링됩니다. 평소엔 별 문제가 없겠지만 얘가 렌더링이 2초정도 걸리는 느린 컴포넌트면 어쩌죠? 그럼 버튼 누를 때 마다 버벅이겠죠? 그럴 땐 memo라는 함수를 쓰면 "꼭 필요할 때만 ..

props를 보냈는데 출력이 안된다거나 이미지를 넣었는데 안 보이는 버그 같은 게 생기면 개발자 도구를 켜서 Elements 탭 살펴보면 되는데 여기선 여러분이 짠 코드가 실제 html css로 변환되어서 보입니다. 그게 싫고 컴포넌트로 미리보고 싶으면 리액트 개발자 도구를 설치해서 켜보면 됩니다. 크롬 확장프로그램 : React Developer Tools https://chrome.google.com/webstore/ 크롬 웹스토어 들어가면 확장 프로그램 설치가 가능합니다. 여기서 React Developer Tools 설치하면 Components 탭이 생기는데 여러분들이 개발중인 리액트 사이트를 컴포넌트로 미리 볼 수 있습니다. 왼쪽에서 컴포넌트구조 파악이 가능하고 왼쪽 상단 아이콘 눌러서 컴포넌트..

ajax 요청하다보면 이런 기능들이 가끔 필요해집니다. - 몇초마다 자동으로 데이터 다시 가져오게 하려면? - 요청실패시 몇초 간격으로 재시도? - 다음 페이지 미리가져오기? - ajax 성공/실패시 각각 다른 html을 보여주려면? 직접 개발해도 되겠지만 귀찮으면 react-query 라는 라이브러리 설치해서 써도 됩니다. SNS, 코인거래소같은 실시간 데이터를 보여줘야하는 사이트들이 쓰면 유용하고 나머지 사이트들은 딱히 쓸데는 없습니다. react-query 설치 & 셋팅은 터미널에서 npm install react-query 하고 index.js 파일 열어서 1번 2번 3번 하면 됩니다. react-query로 ajax 요청하는 법 그냥 ajax 요청해도 되는데 react-query를 써서 ajax..

1. 컴포넌트 안에서 쓰는 if/else 컴포넌트에서 JSX를 조건부로 보여주고 싶으면 그냥 이렇게 씁니다. 우리가 자주 쓰던 자바스크립트 if문은 return () 안의 JSX 내에서는 사용 불가능합니다. if (어쩌구) {저쩌구} 이게 안된다는 소리입니다. 그래서 보통 return + JSX 전체를 퉤 뱉는 if문을 작성해서 사용합니다. 2. JSX안에서 쓰는 삼항연산자 영어로 간지나게 ternary operator 라고 합니다. 조건문 ? 조건문 참일때 실행할 코드 : 거짓일 때 실행할 코드 이 형식에 맞춰 쓰면 끝입니다. 삼항연산자는 그냥 if와는 다르게 JSX 안에서도 실행가능하며 조건을 간단히 주고 싶을 때 사용합니다. 3. && 연산자로 if 역할 대신하기 html 조건부로 보여줄 때 이런 ..

Redux의 state를 변경하고 싶으면 변경하는 법이 따로 있습니다. store.js에 state변경해주는 함수부터 만들고 export 해두고 필요할 때 import 해서 쓰면 되는데 dispatch() 로 감싸서 써야합니다. 좀 길고 복잡합니다. store의 state 변경하는 법 큰 그림은 다음과 같습니다. state 수정해주는 함수부터 store.js에 만들어두고 그걸 컴포넌트에서 원할 때 실행하는 식으로 코드를 짭니다. 버튼누르면 예전에 'kim' 이라고 저장해놓은걸 'john kim' 으로 수정하고 싶으면 어떻게 해야할지 알아봅시다. 1. store.js 안에 state 수정해주는 함수부터 만듭니다. slice 안에 reducers : { } 열고 거기 안에 함수 만들면 됩니다. - 함수 작명..

Redux 쓰면 뭐가 좋아요? Redux는 props 없이 state를 공유할 수 있게 도와주는 라이브러리입니다. 이거 설치하면 js 파일 하나에 state들을 보관할 수 있는데 그걸 모든 컴포넌트가 직접 꺼내쓸 수 있습니다. 그래서 귀찮은 props 전송이 필요없어집니다. 컴포넌트가 많아질 수록 좋겠군요. 그래서 사이트가 커지면 쓸 수 밖에 없어서 개발자 구인시에도 redux같은 라이브러리 숙련도를 대부분 요구합니다. Redux 설치는 터미널에 입력하면됩니다. 참고로 redux toolkit이라는 라이브러리를 설치할 건데 redux의 개선버전이라고 보면 됩니다. 문법이 좀 더 쉬워집니다. 근데 설치하기 전에 package.json 파일을 열어서 "react" "react-dom" 항목의 버전을 확인합시..

App에 있던 state를 하위(자식)컴포넌트에서 사용하고 싶어지면 어떻게 코드짜야하죠? App -> 자식Component -> 자식Component이렇게 props를 2번 전송해주면 됩니다. 이게 귀찮으면 Context API 문법을 쓰거나 Redux 같은 외부 라이브러리 쓰면 되는데 오늘은 전자를 알아봅시다. Context API 문법으로 props 없이 state 공유하기 재고라는 state를 App 컴포넌트에 만들어봅시다. 이걸 TabContent라는 자식컴포넌트에서 쓰고싶다고 가정해봅시다. Context API 문법을 쓰면 props 전송없이도 TabContent 컴포넌트가 쓸 수 있는데 이거 쓰려면 일단 셋팅부터 해야합니다. ▲ 1. 일단 createContext() 함수를 가져와서 conte..

서버란? 유저가 데이터달라고 요청을 하면 데이터를 보내주는 간단한 프로그램일 뿐입니다. 네이버웹툰 서버 : 유저가 웹툰 달라고 하면 웹툰 보내주는 프로그램 유튜브 서버 : 유저가 영상 달라고 하면 영상 보내주는 프로그램 입니다. 그래서 "누가 A를 요청하면 A를 보내주세요" 라고 코드짜는게 서버개발 끝입니다. 유저가 그냥 데이터달라고 떼쓰면 서버가 보내주진 않습니다. 서버에 데이터를 요청할 때는 정확한 규격에 맞춰서 요청해야하는데 어떤 데이터인지 (URL 형식으로) 어떤 방법으로 요청할지 (GET or POST) 잘 기재해야 데이터를 보내줍니다. 데이터를 가져올 때는 보통 GET 고르면 되고 데이터를 서버로 보낼 때는 POST 고르면 됩니다. 그리고 어떤 데이터를 보고싶은지 URL만 잘 기재하면 되는데 ..

useEffect에 넣을 수 있는 실행조건 useEffect()의 둘째 파라미터로 [ ] 를 넣을 수 있는데 거기에 변수나 state같은 것들을 넣을 수 있습니다. 그렇게 하면 [ ]에 있는 변수나 state 가 변할 때만 useEffect 안의 코드를 실행해줍니다. (참고) [ ] 안에 state 여러개 넣을 수 있습니다. 아무것도 안넣으면 컴포넌트 mount시 (로드시) 1회 실행하고 영영 실행해주지 않습니다. clean up function useEffect 동작하기 전에 특정코드를 실행하고 싶으면 return ()=>{} 안에 넣을 수 있습니다. 그럼 useEffect 안에 있는 코드를 실행하기 전에 return ()=>{ } 안에 있는 코드를 실행해줍니다. 참고로 저걸 clean up funct..