이제는 최적화 하자

count는 그저 숫자다. state를 업데이트할 때마다, 리액트는 컴포넌트를 호출한다. 매 렌더 결과물은 고유의 counter상태 값을 살펴본다. 이 값은 함수 안에 상수로 존재하는 값이다. 랜더링 결과물에 숫자 값을 내장하는 것에 불과한 것!setCount를 호출할

카테고리를 누르면 해당 카테고리 페이지로 넘어가고 해당 카테고리에 맞는 데이터를 서버에서 받아 와야 한다. 즉, router 후에 query를 가져와서 그것을 서버에 전송해야 하는 것이었다. 다른 팀원의 파트였는데 프로젝트 기간 중에는 결국 시간적 압박으로 해결하지 못

잡초처럼 버틴 인턴십 후기

추후 업데이트 '직방' 이란 부동산 정보 중개 플랫폼을 모티브로 개발 프로젝트를 진행하였습니다.

state, effect, ref hooks 친구들을 모두 활용할 수 있는 즐거운 sticky!window scroll이 아니니까 ref로 target를 지정한다. target의 움직임을 감지하는 함수를 만들고 움직일 때마다 함수를 실행한다. state값에 일정 y값

지도를 띄우자 내 마음에 지도를 띄우자 시작 키 발급은 생략하고 먼저 지도를 담을 컴포넌트를 만든다. 지도를 넣을 곳에 id를 준다. useEffect으로 api를 호출하는데 ![](https://images.velog.io/images/dongha1992/po

props는 둘 다 사용 가능하다. state는 함수에선 hook으로 사용한다. props를 준다. function 에선 이렇게 비구조 할당으로 값만 받으면 된다. 클래스에서 이벤트가 발생하면 setState를 하고 setState가 되면 render가 된다. 함수에서

프로젝트 영상 https://www.youtube.com/watch?v=aPFeH9Arw9Q 프로젝트 요약 1) 소개 hourplace라는 장소 렌탈 플랫폼을 클론 코딩 백엔드와 프론트엔드의 협업을 통해 실질적으로 웹이 만들어지는 플로우를 이해 hourplace

Hook은 state와 생명 주기를 hook into(연동)하게 해주는 함수다. 컴포넌트 간 상태와 관련된 오직을 재사용하기 위해서 (HOC, render props)복잡한 컴포넌트들을 이해하기 어려워서class는 사람과 기계를 혼동시킨다(왜죠?)state와 라이플 사

Coffe 컴포넌트는 데이터를 받아오고 CardList에 데이터를 뿌린다.Coffee 컴포넌트 내부.일단 CDM으로 데이터를 가져오는데 LIMIT이란 상수를 준다. 그리고 이제 button을 ruturn하는데 버튼에 fetchCoffee라는 함수가 있다. limit과

Monsters가 부모 컴포넌트고 CardList에 데이터를 뿌린다. CardList에는 Card컴포넌트가 있다. 이제 Monsters에서 Card를 클릭하면 각 카드에 맞게 이동해야 한다. Card 컨테이너에 onClick을 한다. 그리고 함수 실행. 함수에는 his

이제 코드 몇 줄 치기 시작한 비전공자의 한 달

Vanilla Javascript로 프로그래밍했던 인스타그램을 React.js로 리팩토링CRA를 사용하여 초기 세팅git을 사용한 첫 번째 협업Fetch를 이용하여 외부 데이터 사용2020.10.05 ~ 2020.10.13 총 9 일HTML,CSSJavaScriptR

조지자 애니메이션!scss에서 애니메이션은 다르게 쓰는 줄 알고 찾아봤는데 저렇게 커스터마이징이 가능하다. 하지만 난 기본 애니메이션도 아직은 서툴기에 기본에 확실할 것이다!키프레임 + 애니메이션으로 간단하게 효과를 줄 수 있다. 요렇게 li안에 animation을 정

search 리액트로 검색 기능을 어떻게 하는지 알아보자! 기본 세팅 먼저 Monster.js가 부모 컴퍼넌트고 fetch로 데이터를 받아온다. CardList, SearchBox 컴포넌트가 있다. ![](https://images.velog.io/images/

궁금한 것 import 할 때 컴포넌트를 그냥 가져오기, {}로 가져오기 Provider? React.createContext()?

세팅 formatCount 함수는 값이 zero인지 체크해준다. 버튼을 누르면 state 값이 증가하는 기본적인 리액트 기능 신기술 ![](https://images.velog.io/images/dongha1992/post/0a4c7f86-5959-4904-947

npm install 할 때 --save해야 함. exact는 정확하게 한 곳만을 렌더하게 해주는 것이다. 예를들어 "/"는 3개의 Route 모두 들어있어서 exact가 없으면 다 렌더될 수 있다.Route 컴포넌트 세팅을 끝냈다면 이제 Route를 이동해야 한다.

세팅 및 클릭 이벤트는 1편 참조!https://velog.io/@dongha1992/react-tic-tac-toeBoard에서 state를 관리할 때 배열을 복사했다. 불변성을 지키기 위해서다. 배열, 객체 수정하기그럼 불변성이 가진 이점을 알아보장!특정