타코벨코딩

리액트에서 컴포넌트를 선언하는 방식은 두 가지다. 클래스형 컴포넌트 함수형 컴포넌트 클래스형 컴포넌트와 함수형 컴포넌트의 차이는 무엇일까? 특징 클래스형 컴포넌트 - state 기능 및 라이프사이클 기능을 사용할 수 있다.- 임의 메서드를 정의할 수 있다.- render함수 가 꼭 있어야한다. - render함수 내에서 보여주어야 할 JSX를 반환해야한다. 함수형 컴포넌트 - 클래스형 컴포넌트 보다 선언하기가 훨 씬 편하다.- 클래스형 컴포넌트보다 메모리자원을 덜 사용한다.- 프로젝트 완성 후 빌드하여 배포할때 클래스형 컴포넌트보다 결과물의 파일크기가 작다.- state와 라이프사이클 API의 사용이 불가능하다. (리액트 16.8v. 업데이트 이후 Hooks 기능 도입으로 사용가능해짐)

번들러란? import 로 모듈을 불러왔을 때 모듈을 모두 합쳐서 하나의 파일을 생성해주는 것 읻가. 리액트에서 프로젝트를 만들 때 node_modules라는 디렉터리도 함께 생성되며, 프로젝트 생성 과정에서 node_modules디렉토리에 react모듈이 설치된다. → 그러면 import구문을 통해 리액트를 불러와서 사용할 수있는데 여기서 한가지 알아야 할 점이 있다.!! 모듈을 불러와서 사용하는 것은 원래 웹 브라우저에서는 없던 기능인데 이러한 기능을 브라우저에서도 사용하기 위해 번들러 개념이 탄생한 것이다.😈 번들러는 파일을 묶듯이 연결하는 것을 의미하며**, 브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해주는 환경인 Node.js가 지원해준다.** (참고로 Node.js에서는 impor..

Props Drilling 이란 무엇인가요? 리액트의 컴포넌트 트리에서 데이터를 전달하기 위해서 필요한 과정을 의미합니다. 예를 들어 우리가 App.js에서 데이터를 하위컴포넌트까지 쭉 전달하면 데이터가 변경되었을 때 일일히 고쳐야하는 불편함이 있습니다. 이를 해결하기 위해 전역 상태 관리 라이브러리인 Redux, Mobx를 이용하여 해당 값이 필요한 컴포넌트에게 직접 불러서 사용하는 해결하는 방안이 있습니다. 이렇게 상위 컴포넌트에서 또 하위 컴포넌트로, 또 하위, 또 하위로.. 컴포넌트가 드릴처럼 밑으로 뚫고 내려간다. 이래서 생긴 props drilling이란 단어입니다. 결과를 보면 다음과 같이 잘 출력될겁니다! 정도 props로 넘겨받는 정도라면 상관이 없겠지만.. 과연 이게 네 번, 다 섯번 ..

자바스크립트는 현재 웹 어플리케이션에서 가장 혁신적인 역할을 하고 있다 . 영역을 확장하여 서버 사이드는 물론 모바일 , 데스크톱 어플리케이션에도 적용이 가능하다. 이렇게 자바스크립트만으로 규모가 큰 애플리케이션을 만들기위해 여러 프레임워크 들이 등장하게 되웠다. 주로 MVC, MVVM 아키텍처를 사용한다. 페이스북 개발 팀은 이를 해결하기 위해 어떤 데이터가 변화 할 때마다 어떤 변화를 줄지 고민하는것이 아니라 기본 뷰를 버리고 처음부터 새로 렌더링하고자 하였다 그런데 변화에 따라 렌더링을 계속하면 cpu 점유율도 크게 증가하고 메모리도 많이 사용하게 된다. 그래서 성능을 최대한 아끼면서 사용할 수 있도록 개발한 것이 리액트 이다. 리액트 이해 리액트는 MVC MVW 등인 프레임워크와 달리 오직 Vie..

자바스크립트에서 불변성은 : 메모리 값을 변경할수 없는 것 의미다. 얕은 복사 와 깊은 복사가 있다 얕은 복사는 객체 a.b 가 있으면 데이터의 주소를 똑같이 참조 하고 있음 a객체에 접근헸음에도 b객체의 값이 달라지는 것 (참조타입 객체 예시를 생각하면 쉽다) 생략... 깊은 복사는 아예 새로운 객체 안 속성 (property) 만 복사해서 사용하는 것 이다. spread 연산자를 사용하여 { ... x} 불변성을 유지시킨다. React에서 state 의 변화값을 비교하는 데에서는, 불변성을 지켜주어야 변경됨을 인지한다 React의 함수형 프로그래밍에서 사용되는 순수함수는, 동일한 값을 인풋하였을 때 동일한 값을 아웃풋하는 함수를 뜻하며, 외부의 값을 변경하는 것과 같은 사이드 이펙트를 막는 함수이다 ..

https://todo-3db52--preview-name-28y1dpy1.web.app/ https://todo-3db52.web.app/ React App todo-3db52.web.app 리액트 면접기술을 학습하면서 코딩 연습사마 todo app 프로젝트를 구현하여 리액트를 학습하였습니다. 입력창에 입력 값을 생성, 저장 추가, 그리고 삭제 기능을 구현하였습니다. firebase 를 사용하여 배포를 하였습니다. issue 1. firebase 현재 17 버전이 매우 불안정해서 지우고 16버전으로 다시 다운받았습니다. 구글링을통해 몇 개 없는 정보를 통하여 빠르게 수정하였다. 2. npm install -g firebase Error 무한 에러가 뜨면서 설치가 되지 않아 당황스러웠지만 빠르게 구글링 ..

리덕스 = 자바스크립트 중 라이브러리 이다 npm i redux react-redux 먼저 사용하기 위해서 터미널 창에 install 해주세요! 왜 리덕스쓰는 이유 2가지 1. 모든 컴포넌트가 props 없이 state에 직접 꺼내 쓸 수 있다. 2. 상태 관리가 용이하다(유지보수 좋다) 설명: 상태 / 한 곳에 관리 가능하다 관리 / 추적이 쉽다 설명 🫵🏻🫵🏻 리액트 에서 부모 컴포넌트 자식컴포넌트가 있다 자식에게 부모 컴포넌트를 주기 위해 우리는 props 를 사용한다. state 변수에 props 전송 하는 방법이 useState ! 좀 더 편리 한 방법으로 전송하기위해 직접주는게 아니라 필요 할 때 내가 꺼내 쓸 수 있도록 하는 것 이다. Life Cycle 라이프 싸이클 개념 알고가기 컴포넌트 ..