Jay

앞에서 배웠던 컨셉을 조금 정리하고 성능에 대해서 한번 정리해보자. React는 총 두가지 문장으로 설명할 수가 있는데, 첫번째는 리액트는 Component들이고 두 번째는, 데이터가 조금이라도 업데이트가 되면 전체적으로 어플리케이션이 다 re-render 된다(Re-render the whole app on every update) react에는 클래스로 만들수 있는 Component와 PureComponent가 있다. 또 함수로 만들 수 있는 Component는 그냥 function을 쓰는 거 memo를 쓰는 거 그리고 React Hook쓰면 함수를 쓰면서 클래스 Component와 같이 state와 라이프사이클 메소드를 이용할 수 있다. Habit Tracker를 살펴보면 habit tracker에..

components폴더안에 habitAddForm.jsx 파일을 만든 후에 rcc를 이용해서 기본골격을 만든 다음에 habitAddForm은 추가해주는 form이기 때문에 div대신에 form을 이용한다. 클래스 이름은 add-form으로 해주고 input은 type은 text로 해주고, 클래스이름을 add-input으로 지정해준다. placeholder도 넣어주고 (텍스트가 미리 보여질 수 있도록) 마지막으로 사용자가 버튼을 눌러야 하니까 버튼도 지정해준다. 목록 만들기전에 habits에다가 render()부분에 텅텅 빈 컨테이너 안에 ul을 추가해주고 위에다가 HabitAddForm을 추가해주면 import 되어진다. 그러면 아래와 같이UI가 표기되어진다. 이제 Add를 누르면 UI에다가 추가가 되도..

app.jsx에서 rcc를 이용해서 간단한 형태를 만들어주고 App으로 대문자로 변경한 다음에 중복되는 거 다 지워주고 render에서 habit을 보여준다. habit에 있는 state를 복사해서 붙여놓고 handleIncrement와 Decrement와 Delete도 복사해 준다. habits이라는 컴포넌트는 아무런 데이터도 없고 멍청한 컴포넌트이다. 대신에 props에 전달된 습관들의 배열을 돌면서 habit 이라는 컴포넌트로 변경해서 보여주는 일만 하고 있다. habit도 마찬가지, 아무런 상태가 없고 props로 전달받은 것만 보여주고 있다. 그리고 habits와 habit 각각이 HTML 태그를 이용해서 ul과 리스트 아이템의 태그를 이용하고 있다. 즉 리액트에서도 가능하면 div를 남용하는 ..

handleIncrement를 구현해본다. 전달된 습관의 count를 증가시켜야 된다. 배열안에 있는 전체적인 오브젝트를 props로 전달하고 클릭이 되면 함수인자로 전달 받는다. 오브젝트는 참조값을 전달하기 때문에 동일한 오브젝트를 가리키고 있다. 배열안에 있는 오브젝트를 가리키고 있는 거랑 같으니까 habit의 count를 하나 증가한 다음에 리액트에서 제공하는 setstate를 API를 호출해서 this에 있는 state를 전달하면 되지 않을까? 이렇게 하면 작동은 하지만 리액트에서는 state를 직접적으로 수정하면 안된다. 로컬변수인 habits라는 변수는 새로운 배열을 만들고 이 배열에는 기존에 존재하는 state의 habits을 만들어 볼거다. ...연산자는 Spread Operator하는 연..

클릭이 되면 count를 증가하고 감소하고 삭제까지 되는 걸 해보자 핸들링하는 로직들을 전부 다 지워주고 동일하게 클릭 이벤트를 처리해준다. delete 버튼에도 클릭 이벤트를 처리해준더. (this.handleDelete라고 이름을 지어주고) 여기에서 동일하게 정의해준다. 이렇게 해서 Habit이라는 습관 컴포넌트는 자체적으로 가지고 있는 상태 state는 없다. 외부에서 props로 전달받은 습관, habit라는 오브젝트의 데이터를 보여주는 컴포넌트이다. 그래서 클릭이 되면 내부적으로 데이터를 처리하기 보다 외부에서 플러스 버튼이 클릭되면 함수를 호출하고, 마이너스 버튼 클릭되면 이 함수 호출해라고 주어진 콜백함수 단순히 호출만 하는 컴포넌트를 만들어 보자 props로 전달된 habit의 이름과 co..

Habits라는 컴포넌트를 만들어보자 진행중인 프로젝트 폴더 habit-tracker의 components의 폴더 안에 habit.jsx파일을 만들어 준다. rcc를 이용해서 뼈대를 생성하고 컴포넌트에는 state 오브젝트가 있는데 이 state라는 오브젝트에는 habits이라는 배열을 가지고 있다. 각각의 배열에는 habit이라는 오브젝트가 있다. habits.jsx파일에서 map을 이용해 각각의 habit을 받으면서 알맞는 JSX로 변환해준다. 여기서 Habit이라는 컴포넌트를 앞에서 만들어 놨으니까 써주고 App 컴포넌트에서 Habit이 아니라 Habits로 바꿔준다. 그러면 Habit은 더 이상 안 쓰이니까 지우고 habits 컴포넌트에 habit 컴포넌트를 import 해준다. 이제 habits..

간단하게 클래스 컴포넌트를 이용해서 state를 변경해서 render 함수가 다시 호출 될 수 있도록 만들것인데, 버튼 클릭하면 숫자가 올라가거나 내려가게끔 만들어 보았다. 먼저 클래스 이름 increase 옆에 onClick은 onClick이 발생하면 클래스 안에 있는 handleIncrement, 이 함수를 호출해라라고 전달 컴포넌트 state에 있는 count를 증가 하는 것이 사용자의 주 목적이기 때문에 아무런 인자를 받아오지 않고 해야하는것은 state 오브젝트 안에 count를 증가한 뒤 state를 업데이트 하는 것이다. 리액트 컴포넌트에서 제공하는 this.setState()라는 함수를 이용하자. Decrement할 때는 count변수를 지정해 준 뒤, count가 0보다 작을 때는 0을 ..

Habit이라는 컴포넌트를 만들기=> 컴포넌트 파일안에 habit.jsx파일 만들기 rcc 이용해서 기본적인 컴포넌트 골격 만들기 아래와 같이 임의로 habit.js 에다가 span을 이용해서 수동적으로 글귀를 넣고 font를 넣어보자. 여기서 주의할 점은 각각의 btn에 class가 아닌 className을 넣어준다(N은 대문자로) CSS 스타일링은 알아서 해보자. 참고: https://academy.dream-coding.com/courses/react-basic 리액트 강의 (유튜브 클론 코딩 + 실시간 전송 명함 카드 만들기 웹앱 만들기) 리액트 전반적인 개념 설명과 (클래스 컴포넌트와 함수 컴포넌트 그리고 리액트 훅까지) 실전 유튜브 클론 코딩 프로젝트. Firebas의 실시간 데이터베이스를 이..

처음 리액트가 나왔을때 JSX가 없었다. 그래서 리액트에 있는 createElement라는 함수를 이용해서 h1 태그를 만들고, 클래스는 없고, 스타일 같은거 지정 X 안에 데이터는 Hello다 라고 JS 코드처럼 넣었다. 이렇게 복잡해서 나온것이 JSX 즉, JSX는 HTML 처럼 할 수 있도록 만들어진 것(조금 더 발달된 거) 그래서 리액트에 있는 Fragment를 사용해도 되고 그냥 아무거도 작성하지 않고 아래와 같이 작성해도 된다. div가 없이 아무런 부모 태그가 없는 h1 두 개가 들어 있다. 즉, JSX는 다수의 태그들을 리턴 할 수 없기 때문에 형제 노드가 있으면 묶어줘야 한다. 참고: https://academy.dream-coding.com/courses/react-basic 리액트 강..