Study/React (28) 썸네일형 리스트형 컴포넌트 설계에 대해 궁금한 점 어디부터 어디까지가 view의 영역인가? React를 이용해 어플리케이션을 만들다 보면, 보통 컴포넌트 단위로 코드를 작성하게 된다. 이 때 컴포넌트는 최대한 단순하게, 다시 말해 view 레이어(사용자 화면에 어떻게 표시될 것인지) 만을 담당할 수 있도록 설계하는 것이 좋다는 이야기를 들었다. http 통신 로직 분리하기 예를 들어 백엔드로부터 event list 데이터를 받아오고, 이를 메인 페이지에 렌더링해서 보여주는 코드가 있다고 해보자. EventList 컴포넌트를 만들 때에는 다음과 같은 패턴이 가장 보편적이다. export default function HomePage() { const eventList = getAllEventList() return } eventList를 요청하는 것과 관.. react-firebase | authentication +) authentication concepts | 인증에 대한 기본 개념 firebase authentication | youtube | react firebase authentication tutorial 1. connecting firebase to our projects $ npm install firebase $ yarn add firebase 프로젝트 폴더에서 firebase 패키지를 설치한다. firebase console > 새로운 프로젝트 만들기 해당 프로젝트 설정(setting) 페이지 > 그림의 버튼을 클릭하면, console의 프로젝트와 실제 프로젝트 폴더(1번에서 패키지를 설치한 폴더)를 연결할 수 있도록 가이드를 제공한다. 가이드에서 아래와 같은 형식의 코드를 제공한다. // s.. Deployment | firebase hosting Deployment steps Test code Optimize code Lazy loading Build app for production building app doesn't mean we have to write more codes. 이미 작성되어있는 특정 script를 실행하는 것이다. => production을 위한 코드(자동으로 최적화되고 압축된 코드)를 반환한다. Upload code to server 3에서 만들어진 코드 패키지를 업로드한다. Configure Server Optimize what is lazy loading? 코드를 최적화하는 방법은 여러 가지가 있다. 예를 들어, props이 변경되었을 때에만 컴포넌트를 재평가하는 React.memo도 최적화의 한 방법이 된다. Lazy.. Validation when to validate? onSubmit 사용자가 입력을 진행하는 중에 경고 메세지를 보여주지 않는다. 불필요한 warning을 피할 수 있지만, 입력값에 대한 유효성 피드백이 다소 늦어진다. onBlur submit과 마찬가지로, 불필요한 경고 메세지를 보여주지 않을 수 있다. form의 touched 상태를 관리할 때 유용하다. onChange 사용자의 모든 key stroke에 대해 유효성 검사를 진행한다. 빠른 피드백을 보여주는 동시에, 불필요한 경고 메세지(값을 전부 입력하기도 전에 유효성 평가)를 띄운다. useRef vs. useState // useState const [name, setName] = useState(''); const changeHandler = (e) => { s.. custom Hooks what is custom Hooks? custom hooks도 결국 일반적인 함수의 하나이다. 단, 다른 함수들과 달리 블럭 안에 stateful logic을 포함할 수 있다. => hooks와 state를 사용할 수 있다. 이 때 어플리케이션에서 중복으로 사용되고 있는 로직을 커스텀 훅으로 만들면, 여러 곳에서 재사용할 수 있다. 로직은 공유하고, state는 따로 갖는다. src/hooks 폴더를 만들어서 관리한다. remind | rules of hooks 컴포넌트 함수/ 커스텀 훅이 아닌 함수 안에서는 리액트 훅을 사용할 수 없다. (컴포넌트/커스텀)함수의 top level(direct level)에서 리액트 훅을 호출해야 한다. how to make customHooks? // use-coun.. HTTP Request without using Database loading state function App() { const [movies, setMovies] = useState([]); const [loading, setLoading] = useState(false); async function getMovies() { setLoading(true) const res = await fetch('https://swapi.dev/api/films') // 에러 핸들링 const data = await res.json() const fetchedMovies = data.results.map((item) => { return { id: item.episode_id, title: item.title, openingText: i.. Optimization | how does react work? VDOM & RealDOM React | 핵심 기능은 컴포넌트를 만들고, props, state, context 등으로 그 컴포넌트를 관리(manage)하는 것이다. 컴포넌트가 업데이트 되어 함수를 재실행하고, 그 결과 re-rendering이 일어나야 한다면 리액트는 이것을 리액트 DOM에게 알린다. 이 때 리액트는, 렌더링하기로 결정한 components를 tree로 나타내는 Virtual DOM을 이용한다. => 화면에서 컴포넌트가 어떻게 보여야 할 것인지 결정하고, 이 정보를 스냅샷의 형태로 ReactDOM에 전달한다. ReactDOM | 브라우저 화면에 컴포넌트를 출력한다. 실제 DOM 요소를 조작해서 전달받은 Components tree를 화면에 렌더링한다. ReEvaluate vs. ReRe.. etc | Image, Icon, Input image import 바닐라 js에서 import 할 수 있는 파일은 js 파일 뿐이다. 하지만 리액트에서는 css 파일이나, 이미지 파일을 import 할 수 있다. 프로젝트를 배포하면, 우리가 import한 이미지가 어플리케이션에 포함되도록 리액트가 코드를 변환해 주기 때문이다. import image from '../../assets/meals.jpg' // 확장자 생략 불가능 const image = () => { return } +) 타입스크립트 리액트에서 이미지를 import 하려면, 프로젝트 폴더 바로 아래에 index.d.ts 파일을 생성하고, tsconfig에 옵션을 추가해 주어야 한다. // index.d.ts declare module '*.png'; declare module '*.. 이전 1 2 3 4 다음
