Mo's Develog

컴포넌트가 재렌더링되면 거기 안에 있는 자식컴포넌트는 항상 함께 재렌더링됩니다. 리액트는 그렇게 대충 무식하게 동작하는데 평소엔 별 문제가 없겠지만 자식컴포넌트가 렌더링시간이 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 쓰면 뭐가 좋아요? 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..

오늘은 Lifecycle이랑 useEffect라는 함수에 대해 알아봅시다. Lifecycle 이라는 개념이 있는데 실은 별거아닙니다. 이걸 배우는 이유는 componentDidMount() 이런 유용한 Lifecycle 함수들을 쓰기 위해서 배우는겁니다. 요즘 사람들은 저렇게 긴 함수 안쓰고 useEffect() 라는 깔끔한 함수를 사용하기 때문에 우리도 그걸 알아봅시다. 컴포넌트의 인생 여러분이 만들어쓰고있는 컴포넌트는 Lifecycle이라는 개념이 있습니다. 컴포넌트도 인생이 있다는겁니다. 컴포넌트는 생성이 될 수도 있고 (전문용어로 mount) 재렌더링이 될 수도 있고 (전문용어로 update) 삭제가 될 수도 있습니다. (전문용어로 unmount) 우리 인생 살기도 힘든데 컴포넌트의 인생 알아서 ..

쇼핑몰같은 경우 상세페이지가 엄~청 많을 겁니다 그럴때는 어떻게 해야할까요? 상세페이지 여러개 만들려면 그럼 이렇게 코드짜면 되겠군요. 쓰면 페이지하나 만들 수 있다고 했으니까... 를 3개 만드는겁니다. 그럼 페이지 3개 완성 path 작명시 슬래시 기호도 맘대로 사용가능한데 단어간 띄어쓰기용으로 많이 사용합니다. 근데 상품이 100만개라면 도 100만개 만드는건．．． 그건 너무 미친짓이므로 다른 방법을 사용합니다. 페이지를 여러개 만들고 싶으면 URL 파라미터라는 문법을 사용가능합니다. path 작명할 때 /:어쩌구 이렇게 사용하면 "아무 문자"를 뜻합니다. 그래서 위의 는 누군가 주소창에 /detail/아무거나 입력했을 때 컴포넌트 보여달라는 뜻입니다. 이제 그럼 /detail/0 /detail/1..