렌더링 이전에 브라우저 렌더링 과정에 대해서 배운적이 있는데 리액트에서도 이와 유사하게 렌더링이 이루어지곤 한다. 리액트에서 렌더링(Rendering)은 컴포넌트가 state와 props의 값을 기반으로 UI를 생성하고 DOM에 결과를 업데이트하는 과정이다. 리액트에선 크게 3가지 방법으로 렌더링이 발생하곤 한다.1. 초기 렌더링 : 컴포넌트가 처음 화면에 나타날 때 발생 2. 업데이트 렌더링 : 상태(state)나 속성(props)가 변경될 때 발생- setState가 실행되는 경우- useState의 setter가 실행되는 경우- useReducer의 dispatch가 실행되는 경우- 컴포넌트의 keyprops가 변경되는 경우 따라서 key를 임시의 index로 지정하면 안되는경우가 이 경우에 해당된..
함수형 컴포넌트이전 시간에 배운 클래스형 컴포넌트와 달리 함수 형태로 정의되며, 더 간결하고 직관적인 방식으로 UI를 표현이 가능함 특징생명주기 메서드의 부재 : props를 받아 단순히 리액트 요소만 반환하는 함수임함수형 컴포넌트와 렌더링된 값 : 클래스형 컴포넌트의 props는 this로부터 가져오고 this가 가리키는 객체의 경우 변경이 가능하기에 변경된 값을 읽어 render을 비롯한 다른 메서드가 실행된다. 반면 함수형 컴포넌트의 경우 this에 바인딩된 props가 아닌 props자체를 받기에 값이 변경 불가하고, 해당 값을 그대로 사용하게 된다.함수 형태로 정의 :함수형 컴포넌트는 단순한 JavaScript 함수로 정의됩니다. JSX를 반환하며, 반드시 return 문 안에 UI 요소를 포함..
현재는 비교적 함수형 컴포넌트가 많이 사용되지만서도 아직까지 클래스형 컴포넌트 형태를 사용하거나 기존 만들어진 클래스형 컴포넌트 형태를 유지하는 곳도 많다 클래스형 컴포넌트는 ES6의 클래스를 사용하여 정의되며, 생명주기 메소드를 사용할 수 있으며 내부 상태를 가질 수 있어 데이터 변경에 따른 렌더링을 감지 및 관리할 수 있다 클래스형 컴포넌트의 구조 1. 클래스를 선언하고 만들고 싶은 컴포넌트를 extends한다.(React.Component 또는 React.PureComponenet)import React from 'react'class Samplecomponent extends React.Component { render() { return Sample Component }} 2. p..
Infinite Scroll 무한스크롤화면을 아래로 스크롤 할 때 콘텐츠가 지속적으로 로드되어야 하는경우 페이지네이션 대신 무한스크롤이 사용된다 장단점으로는 다음과 같다 장점1. 새로운 콘텐츠 조회의 편리함 : 다음, 더 보기와 같은 상호작용 없이 바로바로 로드가 가능 2. 모바일 기기에 적합 : PC에서도 마찬가지로 작은 뷰 구성엔 적합한 경우가 빈번 단점1. 특정 콘텐츠 조회의 어려움 : 특정 위치의 콘텐츠를 조회 및 기억하기가 어려움 2. 페이지 속도의 감소 : 콘텐츠가 방대할 수록 로드하는데에 더 많은 시간이 소요됨 3. 푸터가 fixed가 아닌 경우 조회 지연 장단점이 명확한 만큼 내가 구현하려는 곳의 성질에 맞게 체계적이고 조건에 맞는 컨텐츠가 조회되어야하는 경우엔 페이지 네이션, 단순히 무한..
지난시간 만든 firebase.js의 Config의 키 값들을 .env파일안에 넣고 값은 process.env.~로 대체 깃허브 같은 오픈소 사이트에 올리게 될 경우 적나라하게 볼 수 있기에 .env파일을 사용 애플리케이션 실행 시 .env에 포함된 값들이 내가 사용하려는 파일(나의 경우 firebase.js Config의 값들로 넘어감. 브라우저상에선 내 키값들이 전부 적용되어 실행되기에 완전 보안이라고는 볼 수 없음 내 firebase Config의 value가 있음 깃허브 업로드 시 env파일은 볼 수 없음 (환경변수파일)
- firebase 셋업(web으로 프로젝트 사용) 강의버전에 맞추기 위해 react router dom 5.3.0사용, firebase 9.6.1 사용 불필요한 파일들 ~.css ~test.js등 삭제 firebase.js파일 생성 후 기본설정 + index.js에서 import Memo - git remote add origin 주소 : 새 리모트 주소 추가 - git status : 현재 상태 확인(뭐가 수정되었고 추가 되었는지) -git commit -m "메세지" : 커밋 생성 -git push orgin master : 변경사항 원격 업로드
오늘은 arrow function에 대해서 이해해보려 한다. 대학생활을 하며 c, c++, python 등 여러 프로그래밍 언어들을 배우면서 함수 선언은 function 민규() ~~ 이런식으로 선언하다가 강의를 들으면서 arrow function을 애용하는 것을 많이 봤다. 실제로 지금은 arrow function을 쓰는 것이 더 간단하고, 가독성도 좋게 느껴질 정도로 익숙해졌지만, 구조라던가 왜 여기선 이게 쓰이는지 저기선 저게 쓰이는지 정확히 알 필요가 있음을 느껴 정리를 한다. Arrow function = () = > { } 기존의 함수와는 다른 방법으로 함수를 선언한다. 따라오는 장점들, 단점들, 제한사항에 대하여 알아보자. 1. 보통 함수 선언 방법 - 이거 말고도 다양한 방법이 있다. fu..
이제껏 강의를 들으면서 잘 모르고 넘어간 것들 제목에 쓰여있는 3가지를 오늘 정리 + 이해해 볼 것이고 지금부터는 내가 직접 코드 작성하고, 파일도 분할해야 하기에 어떤 기능을 위해 쓰였는지 왜 이렇게 작성되었는지 알아야 해서 정리한다 가보자. 아 그리고 여러 블로그, 공식 사이트를 참조했지만 대부분의 내용은 이 두 분의 글을 통해 이해했다. 여러 가지 프런트엔드 관련 좋은 글이 많으니 심심하거나 궁금한 게 있으면 들어가서 보도록 하자. https://joshua1988.github.io/ 캡틴판교 joshua1988.github.io https://velog.io/@change change (Change) - velog velog.io async, await를 이해하려면 비동기 처리, promise나인..
강의를 다 들었다. 들어서 리액트를 마스터했냐? 절~대 아니다 알바를 시작할 때 불편할 거 같아서 옆에서 지켜보세요~하면 다음주에 혼자 일하면 하나도 기억 안 나고 어렵다. 이런 너낌으로 나도 강의 자체가 클론 코딩인 만큼 보고 배운 부분은 머릿속에 어느 정도 넣은 상태이고, 이걸 다시 내 입맛에 정리해보면서 만드는 시간이 필요하다. 어떤식으로? 내가 한 강의의 최종 목적은 넷플릭스 같은 영화 사이트 만들기 많은 영화들을 사람들의 입맛에 맞게 + 보기 좋게 정리한 것이 많은 OTT사이트들의 특징이다. 이 정도는 아니어도 비슷하게끔 만들어 볼 것이다. 내 사이트의 현재 상태는? 흰 도화지 같은 상태인 이 페이지를 내 입맛에 맞게 + OTT페이지답게 만들어 볼 것이다. 중간중간 무슨 작업했는지 올릴 수도 있..
