후니's Blog

React/2022-上

Object.keys, values, entries, assign

2022.04.11

Object.keys, Object.values, Object.entries, Object.assign Object.keys 객체의 프로퍼티들 중에서 key값, 다른 말로 프로퍼티 네임들만 묶어서 배열로 반환하는 메서드 문법 └ Object.keys 메서드의 기본 문법은 그냥 메서드 그대로 Object 객체에 keys 메서드를 호출하고 파라미터로 Key 값을 알아내고자 하는 객체를 전달해주면 됨 └ 주의해야될 점은 Object.keys() 메서드는 객체가 가지고 있는 메서드를 사용하는 것이 아니라 Object라는 내장 객체의 메서드로 사용하고, 파라미터로 우리가 만든 객체를 집어넣어줘야 하기 때문에 myObject.keys()처럼 사용하지 않도록 주의해야 함 Object.values 특정 객체를 대상으로..

React/2022-上

shallow routing

2022.04.11

shallow routing shallow routing 란? data fetching 메서드(getServerSideProps, getStaticProps, getInitialProps)를 다시 사용하지 않고 URL을 변경하는 방식 state를 잃지 않으면서 pathname과 router 객체를 통한 query를 업데이트 할 수 있음 shallow routing을 위해서는 shallow 옵션을 true로 바꿔 주어야 함 불필요한 서버 연산을 최소화하고 필요한 상태 값을 라우터에 넣어서 전달하는 것 data fetching 메서드 Next.js에서는 data fetching 메서드를 제공함 사이트를 렌더링하기 전 어떤 데이터를 이용해서 페이지를 생성할 것인지에 대한 함수를 작성하는 기능을 말함 ┌ get..

React/2022-上

useEffect

2022.04.11

useEffect useEffet() 란? React Component가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 리액트 Hook임 특정 작업은 Component가 렌더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 뜻함 이러한 기능으로 인해 함수형 컴포넌트에서도 클래스형 컴포넌트에서 사용했던 생명주기 메서드를 사용할 수 있게 됨 ┌ componentDidMount : 컴포넌트를 만들고, 첫 렌더링을 다 마친 후 실행 ├ componentDidUpdate : 리렌더링을 완료한 후 실행. 즉, render()가 업데이트 될 때마다 실행 └ componentWillUnMount : 컴포넌트를 DOM에서 제거할 때 실행 기본 형태 ┌ function : 실행하고자 하는 함수 └ deps ..

React/2022-上

useRef

2022.04.11

useRef useRef .current 프로퍼티로 전달된 인자로 초기화된 변경 가능한 ref 객체를 반환함 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지됨 예시 본질적으로 useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 상자와 같음 를 사용하여 reft 객체를 전달한다면, React는 모드가 변경될 때마다 변경된 DOM 노드에 그것의 .current 프로퍼티를 설정함

React/2022-上

Pagination vs Infinite Scroll

2022.04.04

Pagination vs Infinite Scroll Pagination 란? 가지고 있는 많은 데이터를 한 화면에 전부 보여줄 수 없는 경우에 사용함 데이터를 일정 길이로 끊어서 전달함 Pagination 예시 Infinite Scroll 화면에서 페이징 기법을 적용하기 위해 사용하는 방법 중 하나로 모든 데이터를 조회할 대까지 무한정 스크롤하는 기법을 의미함 Pagination과 다르게 페이지 번호가 따로 존재하지 않고 페이지네이션에서 다음 번호를 클릭해야 되는 동작을 단순히 계속 스크롤만 하는 것으로 대체해줄 수 있음 그렇다고 "Infinite Scroll이 Pagination의 상위 호환이다" 라고 말할 수 없음 두 방법은 각각의 장점이 있기 때문에 어떤 UI/UX를 사용자에게 보여줄 것인지에 따..

React/2022-上

State Lifting

2022.04.04

State Lifting State Lifting (State 끌어올리기) React의 데이터 흐름은 상위 컴포넌트에서 하위 컴포넌트로 전달하는 하향식이자 단방향 데이터 흐름을 따름 만약, 하나의 상태가 여러 컴포넌트에 영향을 준다면, 해당 컴포넌트들 간의 가장 가까운 공통의 상위 컴포넌트에 상태를 끌어올리면 됨 이것을 State Lifting (State 끌어올리기)라고 함 공유될 상태를 소유한 컴포넌트가 진리의 원천이 됨 하지만 실제로는 하위 컴포넌트에서 이벤트가 일어나 상위 컴포넌트의 상태를 갱신하는 경우가 존재하고, 이는 역방향 데이터 흐름처럼 보일수도 있음 이를 위해 React에서 제시한 방법은 상위 컴포넌트에 정의된 상태를 변경하는 함수 자체를 하위 컴포넌트에 props로 전달하고, 하위 컴포..

React/2022-上

State Prev

2022.04.04

State useState()를 이용해서 4씩 오르는 카운터 만들기 위 코드를 실행하고 버튼을 클릭했을 때 ┌ 첫번째 버튼 클릭 시 : └ count = 0, 현재 count = 0, 임시저장 count = 1 ┣ 두번째 버튼 클릭 시 : ┌ count = 0, 현재 count = 0, 임시저장 count = 1 └ count = 0, 현재 count = 0, 임시저장 count = 1 ┣ 세번째 버튼 클릭 시 : ┌ count = 0, 현재 count = 0, 임시저장 count = 1 ┣ count = 0, 현재 count = 0, 임시저장 count = 1 └ count = 0, 현재 count = 0, 임시저장 count = 1 └ 네번째 버튼 클릭 시 : ┌ count = 0, 현재 count ..

React/2022-上

State Lifecycle

2022.03.31

State Lifecycle 생명주기 React에서 모든 컴포넌트는 아래의 세가지 단계를 거침 ┌ 초기화 단계 ├ 업데이트 단계 └ 소멸 단계 위의 각 단계에서 몇개의 메서드들이 정해진 순서대로 작동하고 각 단계 속에서 호출되는 메서드들을 바로 생명주기 메서드 라고 부름 리액트는 웹에서 UI 데이터가 변경되면 자동으로 컴포넌트가 업데이트되고 동적으로 화면을 그려줌 제대로 된 기능을 수행하려면 이런 자동으로 업데이트 되는 과정에 끼어들어 API를 호출하기도 하고 데이터를 가공해줘야 할 때도 있음 따라서, 생명주기의 각 단계별로 필요한 순간에 필요한 작업들을 끼워넣을 수 있는 메서드들이 존재함 └ 위의 사진은 리액트의 라이프 사이클을 나타낸 화면 생명주기의 각 메서드들의 역할 초기화 단계 ┌ 초기화 단계에서..

전체 글

Object.keys, values, entries, assign

shallow routing

useEffect

useRef

Pagination vs Infinite Scroll

State Lifting

State Prev

State Lifecycle

티스토리툴바