Jay

작성했던 habit tracker를 github에 배포하는 과정을 해보자. create-react-app에 와가지고 Deployment부분에 가서 Github Pages를 살펴보자.(나중에는 Netlify도 이용하자.) 먼저 github 홈페이지에 들어가서 new repository를 이용해서 새로운 Repository를 만든다.(Description은 맘대로) Public으로 배포한 다음 Create React App으로 프로젝트를 만들면 Git이 초기화가 된다. 이미 있는 레퍼지토리에 추가할거기 때문에 아래와 같은 git 명령어를 친다. git remote add origin https://github.com/K-J-HYEON/habit_tracker.git 아래 명령어를 친다 / 이때까지 작업한 파..

리액트 동작원리에 대해서 다시보면 리액트는 변경사항이 한가지의 방향으로만 흘러간다. 데이터가 변경이 되면 => UI가 업데이트 된다. 즉, 데이터(State)가 변경이 되면 => 리액트가 render() 함수를 호출해서 UI가 업데이트 되는 것 리액트에서 제공하는 setState 함수를 호출하는 코드를 보면 위 코드를 보면 setState 함수를 이용하여 새로운 상태 오브젝트( 업데이트 하려고 하는 상태 데이터)를 인자로 받아 전달해 주는 것을 볼 수 있다. 리액트가 업데이트 되어야 한다고 알아 차리게 하기 위해 setState 함수를 호출해줘야 한다. 그래야 리액트가 상태가 업데이트 됐다는걸 알고 UI를 업데이트 하기 위해 render 함수를 호출하기 위해 준비하기 때문이다. 리액트가 내부적으로 어떻게..

리액트 컴포넌트란???! 리액트에서 컴포넌트라는 것은 웹어플리케이션, 웹페이지 둘다에서 독립적이고 다시 사용이 가능하게 만들어진 단위로써(box단위로) 만들어진 block를 말한다. 최대한 간단하고 독립적이고 재사용이 가능하게 작은 단위로 만들면 좋다. 리액트 라이브러리를 이용해서 컴포넌트를 만드는 방법은 클래스형, 함수형 두가지가 있는데 클래스 컴포넌트 리액트에서 제공하는 React.Component 클래스를 상속하는 클래스를 만들면 되고, UI가 어떻게 표기 될 것인지, 정의하는 render() 함수를 구현해 줘야 한다. 컴포넌트 자체에서 기억이 되어져야 하는, UI를 표기하기 위해서 데이터가 주어진다면 this.state 멤버 변수에 오브젝트 형태로 데이터를 저장할 수 있다. 클래스 특성상, 클래스..

리액트 훅에 대해서 알아보면 앞에서 한 것들을 간단하게 리액트 훅으로 변경하려고 한다. 먼저 simpleHabit.jsx라는 파일을 만들어 놓고 간단하게 이름과 count만 할 수 있게 만든다. index.js에 App 대신에 SimpleHabit을 추가했다. 리액트 훅이라는 것은 기존의 함수형 컴포넌트에서 state와 라이프사이클 메소드를 잘 이용할 수 있게 만들어진 것이다. 최신버전에서 추가가 되었고 클래스 컴포넌트를 리액트 훅으로 변경하면 rsi를 이용해서 함수형으로 컴포넌트를 만들 수 있다. 코드가 많을 때 JSX르 리턴 못하기 때문에 코드블럭을 추가해준다. 리턴한거 복사해서 가져온다. 그리고 리액트 훅에서 state를 쓴다는 것은 useState라는 API를 이용하면 된다. 변수를 선언하는데 c..

간단한 habitAddForm 이라는 컴포넌트를 function 컴포넌트로 변경해볼건데, function 컴포넌트를 쓸때는 클래스를 rcc 이렇게 만들었다. function rsi로 만들면 된다. const라는 변수에 할당해도 되고 function HabitAddForm 식으로 만들어도 된다. rsi로 만들어보면 클래스와 마찬가지로 props 받고 원하는 것을 리턴하면 되는데 바로 컴포넌트를 리턴 하는게 아니라, 처리해야 될 것이 있기 때문에 코드블럭을 이용해고 render()부분에 리턴하는 것을 넣어 줘야 한다. 함수 안에서 const 지역변수를 설정해주고 함수안에서는 this로 안해도 되서 바로 변수에 접근이 가능하다. this도 지워준다. PureComponent를 이용해서 숫자가 증가되면 Habi..

리액트는 문서화가 잘되어 있기 때문에 필요한 지식을 금방 얻을 수 있다....(아래 참고사이트 참조) 라이프사이클을 클래스에 어떻게 추가하는지에 대해서 나와있다. habit이라는 것은 동적으로 생서되서 추가가 되는데 이미 세 가지가 들어있는 경우도 있고 추가하게 되면 새로운 컴포넌트가 만들어진다. 새로운 데이터를 네트워크 통신을 통해서 받아 오거나 타이머를 시작하거나 하게 하는 것이 라이프사이클 함수이다. 컴포넌트 클래스를 상속하게 되면 PureComponent도 컴포넌트를 상속하기 때문에 똑같다. 이렇게 클래스를 이용하면 라이프사이클 메소드를 이용할 수 가 있는데, 컴포넌트가 DidCatcth할 때 에러같은 것을 캐치 했을 때 컴포넌트가 등록이 되었을 때, 업데이트 되었을 때, 마운트가 될 때 이런것들..

habit.jsx파일에 와서 Component를 PureComponent로 바꿔주고 플러스 버튼을 눌러줘도 App창에서 업데이트가 되지 않는다. 왜그러냐면 shallow comparison 때문에 그런데 Habit라는 것은 자체적인 state는 없고 props를 전달받는 데, props안에 데이터가 변경 되지 않으면 render()가 호출 되지 않는게 PureComponent이다. props안에 habit가 있고 각각의 콜백함수가 전달되어지는데, (onIncrement, onDecrememnt, onDelete) 각각의 콜백함수는 결국 App에서 전달되는 건데 앱 클래스 Component 안에 선언된 handleIncrement나 이런 멤버변수같은 것들이 전달되기 때문에 한번 App이라는 클래스가 만들어..

Props에 대해서 개념을 짚고 넘어가자 1. State Component 안에서 사용자가 정의한 Component의 state 오브젝트이다. Component UI를 위한 자료를 보관하는 Object로써, state라는 Object를 통해서 데이터에 업데이트가 발생하면 React가 자동적으로 사용자가 구현한 render function을 호출한다. 이 부분을 아래 그림을 보자 2. Props Component컴포넌트 밖에서 주어지는 데이터인데, Component 안에서 자체적으로 데이터를 정의하여서 사용하는 State와는 달리, Props은 Component 외부에서 데이터를 제공받는다. 가장 근본적인 이유는 Component의 재사용을 높이기 위해서인데, 상황에 따라서 주어진 데이터를 받아서 그 데이..

JS 오브젝트에 대해서 개념 정리 변수에 문자열, 숫자와 같은 원시형 데이터를 할당하게 되면 데이터 자체가 변수에 할당이 되지만, 변수에 오브젝트를 할당하게 되면 변수에는 오브젝트가 메모리에 들어있는 주소인, 참조값이 할당된다. num 변수에 숫자 2 자체가 들어 있지만, numObj에는 {num: 2} 오브젝트가 메모리에 들어 있는 주소인, 참조값이, 예를 들어 주소가 x1234라고 하면 x1234가 할당되어진다. 즉 num에는 숫자 2가 들어 있고, numObj에는 x123 주소가 들어 있다. 만약에 오브젝트를 가리키는 변수를 다른 변수에 할당하면 어떻게 될까? 위 코드를 보면 몇 개의 오브젝트가 메모리에 생성 됐을까? => 2개이다 총 몇개의 변수가 메모리에 생성 됐을까? => 3개이다 코드를 위에..

두개의 변수(states)가 동일한 오브젝트를 가리키고 있을 경우에 코드는 두 개의 변수(states)가 서로 다른 오브젝트를 가리키고 있을 때 두개는 완전 다른 오브젝트이므로 다른 참조값을 가지게 된다. 즉 두개의 참조값이 다르므로, 업데이트가 필요하고, ShouldComponentUpdate 함수는 true를 리턴한다. 참고: https://academy.dream-coding.com/courses/react-basic 리액트 강의 (유튜브 클론 코딩 + 실시간 전송 명함 카드 만들기 웹앱 만들기) 리액트 전반적인 개념 설명과 (클래스 컴포넌트와 함수 컴포넌트 그리고 리액트 훅까지) 실전 유튜브 클론 코딩 프로젝트. Firebas의 실시간 데이터베이스를 이용해 멋진 명함 카드 만들기 웹 어 acade..