시리즈

react

1.react - 기초(1)

필요성 복잡한 html을 사용자 정의 태그 즉, component를 만들어서 가독성, 재사용성이 높아진다. 개발 환성 세팅 npm / npx 로 create-react-app으로 실행한다. 그리고 폴더를 만들고 create-react-app . 을 입력한다.

2020년 10월 19일

2.react - 기초(2)

이벤트 state props > this is subject를 누르면 Content 영역의 내용이 바뀌게 할 것이다. 일단 state에 mode라는 값으로 welcome을 주고 mode가 welcome일 때 무엇을 출력할지 정해준다. ![](https://imag

2020년 10월 25일

3.react - 기초(3)

crete, update, delete 모드를 추가해서 각 모드에 맞게 수정된 compontent가 출력된다. app js에 Control 컴포넌트를 만들고 control.js에 내용을 작성한다. 이제 Control에 onChangeMode라는 props를 준다. 똑깥

2020년 10월 25일

4.react - state로 숫자 변경

리액트에서 가장 중요한 개념으로 props와 state가 있다. props는 속성, 프로퍼티로 부모컴퍼넌트에서 자식컴퍼넌트로 전달해주는 데이터다. 자식 컴퍼넌트에서는 수정이 불가능하고 수정을 하기 위해서는 최상위 부모컴퍼넌트에서 해야한다(state를 이용해서)state

2020년 11월 1일

5.react - movie app clone

state 값에 isLoading이 있고 화면이 렌더 되자마자 바로 실행되는 componentDidMount를 이용해 setTimeout으로 setState를 변경했다. 내가 클론하는 니콜라스는 fetch대신 axios를 쓴다고 한다. 이유는 안 알려준다. 그래서 나도

2020년 11월 2일

6.react - Tic Tac Toe

react로 만드는 신나는 틱택토다. 이런 신나는 게임이다. 게임 룰 https://namu.wiki/w/%ED%8B%B1%ED%83%9D%ED%86%A0 > 링크 참고 세팅 먼저 리액트로 세팅하기 전에 바닐라 자바스크립트로 틱택토를 어떻게 만드는지 알아보

2020년 11월 2일

7.react - Tic Tac Toe(2)

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

2020년 11월 2일

8.react - 정리

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

2020년 11월 5일

9.react - Lyric search

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

2020년 11월 8일

10.react - search 기능

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

2020년 11월 13일

11.react - 동적 라우팅

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

2020년 11월 20일

12.react - hook

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

2020년 11월 29일

13.react - styled component

styeld component는 props를 줄 수 있다. 굉장쓰primary가 props로 있으면 red고 없으면 이렇게 조건을 줄 수 있다. 이렇게 쓴다.. scss를 컴포넌트화 해서 재사용하는 것이 너무 신기하지만 적응하기에 시간이 좀 걸릴 거 같아.. 이번엔 B

2020년 11월 30일

14.react - styled component

2020년 11월 30일

15.React - sticky nav

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

2020년 12월 6일

16.React - 오래달리기

이거 하나 뽑아내려고 맵을 돌리고 쪼개고 나누고 찢고 난리를 쳤다. 눈물나... 코딩 너무 재밌어... 못난 인간이 다른 동물들 보다 유일하게 잘하는 것이 지치지 않고 달리는 것이라고 하는데 그래서 사냥감을 하나 정하면 밤낮이고 쫓아가 지친 동물을 사냥하는 방법으로 살

2020년 12월 9일

17.React - useEffect 부수기

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

2021년 2월 4일