✍ 공부/React

React는 어떻게 동작할까?_리액트가 동작하는 방식

React의 백그라운드 React는 일단 JS의 라이브러리라는 것을 잊지 말아야 한다 React의 핵심은 컴포넌트 => React는 컴포넌트를 통해 사용자 인터페이스를 효과적으로 구성하고 업데이트한다 React DOM? 사실 React는 웹에 관심이 없다. 컴포넌트를 어떻게 다루어야 하는지에 대해서는 알고 있지만 웹에 뭘 어떻게 보여주느냐는 별로 관심이 없음 이건 React DOM이 고려할 것들 React는 가상 DOM을 사용한다. 이 가상 DOM은 컴포넌트 트리를 결정한다. 각각 하위 트리를 갖고 있는 컴포넌트들은 JEX 코드를 반환하는데, 가상 DOM은 컴포넌트 트리의 현재 모양과 최종 모양을 결정한다. => 상태가 업데이트되면 가상 DOM을 통해 상태 변화를 판단. React는 컴포넌트를 관리하고 ..

함수형 컴포넌트로 ref 보내기 | forwardRef에 대해 알아보자

과제테스트 중 forwardRef라는 것을 발견하고(시험 내용 아님!! 그냥 코드에 적혀진걸보고 궁금해서 공부함!!) 이게 뭐지..? 하면서 알아보았다 ✍ forwardRef 함수 컴포넌트가 있다. 이 안에 있는 input에 포커스를 맞추기 위해서 우리는 useRef을 종종 사용한다. 하지만 일반적인 input이 아니라, Input Component라면? 이 때도 useRef을 사용해서 포커스를 줄 수 있을까? 정답은 불가능. 함수 컴포넌트는 ref를 받을 수 없다. = props.ref는 사용이 불가능하다. 이유가 뭘까 ❓ => 함수 컴포넌트는 인스턴스가 없기 때문에 => 따라서, forwrdRef가 필요하다 언제? React.forwardRef는 전달받은 ref을 하부 트리 내의 다른 컴포넌트로 전달..

[ 🐱‍💻 강의 노트 ] React 완벽 가이드 강의 정리 섹션 10 | 리듀서(Reducer)을 사용하여 부작용 처리 & 컨텍스트 API(Context) 사용하기

useEffect cleanup 함수 관련 지식이 모자람을 느끼고 들은 섹션 ✍ Effects, Reducers & Context 📌 Effect, Side Effect 리액트 라이브러리는 UI를 렌더링하는 임무가 있다. 사용자가 무엇인가와 상호작용하게 하는 것. Side Effects는 앱에서 일어나는 다른 모든 것을 뜻함 http request rocal storage 저장 이것들은 모두 애플리케이션에서 고려해야 한다. 그러나 이러한 작업들은 화면에 무언가를 가져오는것과는 직접적인 관련은 없다. 따라서 이것들은 일반적인 컴포넌트 함수 밖에서 일어나야 한다. 예를 들어 http request를 컴포넌트 안에서 시행하면 state가 변경될 때마다 계속 받아오게 된다. 무한 루프로 빠질 수도 있음. 따라서..

React 프로젝트 구조 잡기

작성 이유 구조를 하나도 생각하지 않고 만든 프로젝트 리팩토링하면서 너무 고통받아서 팀 프로젝트를 진행할 때 체계적인 구조를 잡고 진행하는 것이 좋을 것 같아서 0. React 공식문서 React는 파일을 어떤 식으로 폴더에 분류할 것인지에 대해서 제시하고 있지는 않습니다. 그러나 React 생태계 내에서 고려할만한 몇 가지 인기 있는 일반적인 접근법들이 있습니다. ✍ 파일의 기능이나 라우트에 의한 분류 일반적인 방법 중 하나. CSS, JS, 테스트 파일을 기능이나 라우트로 분류된 폴더에 같이 두는 방법 common/ Avatar.js Avatar.css APIUtils.js APIUtils.test.js feed/ index.js Feed.js Feed.css FeedStory.js FeedStory..

[ 🐱‍💻 강의 노트 ] React 완벽 가이드 강의 정리 섹션 27 | React + TypeScript 사용하기

React에 TypeScript를 함께 쓰고 있지만 지식의 얕음을 느끼고 다시 공부했다. 도구를 그냥 쓰는 것과 잘 알고 쓰는 것은 역시 다름을 느낀다. 0. React + TypeScript ✍ What? Why? 타입스크립트는 자바스크립트의 superset 자바스크립트의 기본적인 문법, 코드 작성법 등을 그대로 사용하지만 새로운 기능이 추가됨 타입스크립트는 자바스크립트의 라이브러리가 아니기 때문에 js기능을 확장하지는 않는다. 하지만 확장된 문법을 가지고 정적 타입을 갖는다. JS : dynamically tpyped (동적 타입 언어) TS : JS + static typing (정적 타입 언어) ✅ JS 함수 선언 시점에는 자료형을 특정 짓지 않는다 매개 변수를 받는다는 것만 알고 있음. 사용한 ..

[ 🐱‍💻 강의 노트 ] React 완벽 가이드 강의 정리 섹션 29 | 리엑트 요약 및 핵심 기능

0. React 프로젝트 만들기 표준 JS 프로젝트에는 HTML, CSS와 JS 파일들이 있고 HTML 파일 안에서 외부 파일들을 import 해서 동작한다 React에서는 이런식으로 하면 안됨. JS 안에 HTML을 쓴다 그래서 React에서는 좀 더 복잡하다. 빌드 단계를 거쳐야 하기 때문. 개발자들이 편한 방법대로 코드를 작성하면 내부적으로 변환된 후 브라우저에 도달. React에서는 개발 서버도 필요하다. 이 개발 서버가 리액트 애플리케이션을 로컬 호스팅한다. 페이지를 reload하지 않아도 업데이트됨. 도구를 이용해서 React 프로젝트를 만들어야 한다 가장 많이 쓰이는 것은 create-react-app 하지만 이 create-react-app을 쓰려면 Node.js를 먼저 설치해야 한다 No..

[ 🐱‍💻 강의 노트 ] React 완벽 가이드 강의 정리

0. 모바일 앱과 웹의 차이 모바일 앱은 화면 전환이 원활하게 이루어져서 기다릴 필요가 없다 하지만 웹사이트는 아니다 웹사이트를 클릭하면 요청이 서버에 전송되고 새로운 html 페이지가 브라우저로 보내져 화면에 표시됨 => 무겁고 불편하다 1. 웹에서 일어나는 사이클 이런요청과 반응 사이클을 자바스크립트로 분해해보자. JS는 개발자들이 브라우저에서 로직을 실행할 수 있게 해준다 => 사용자들이 보는 것을 조작할 수 있음 브라우저에서 JS는 DOM을 조작할 수 있는데 이를 통해 html이 렌더링된다. 이를 통해 새로운 html 페이지를 가져오지 않고도 새로운 것을 사용자에게 보여줄 수 있다 ✍ React가 필요한 이유 React.js는 클라이언트 사이드의 자바스크립트 라이브러리고 client-side의 자..

React에서 상태관리하기 (자체적 방법과 라이브러리 비교하기 Recoil, Redux)

상태? 웹을 렌더하는 데 영향을 미칠 수 있는 값. 이 정의로 보면 useState또한 상태 관리다. => 동적인 값이어야 한다. 지역상태 특정 컴포넌트 안에서만 관리된다 다른 컴포넌트와 데이터를 공유하지 않는다 보통 form 컴포넌트 간 상태 여러 컴포넌트에서 관리되는 상태 일반적으로 prop drilling 방식을 사용한다. 전역 상태 프로젝트 전체에 영향을 끼치는 상태 React의 상태관리 상태 관리 라이브러리를 이용하는 방법 외에도 React가 자체적으로 가지고 있는 상태 끌어올리기(Lifting State Up) 을 이용해 React 자체적으로 해결할 수 있다. 상태 끌어올리기 같은 상태가 필요한 여러 컴포넌트들이 공통적으로 가지고 있는 부모 컴포넌트에 상태를 선언한다. 따라서 여러 컴포넌트가 ..