본문 바로가기

FE54

Object.keys, values, entries, assign 알고리즘을 풀다보면 메서드가 은근 유용할 때가 많다. 물론 효율성을 따지지 않는다는 조건에서다. 초보라면 효율성이나 속도보다 일단은 풀어내는 게 중요하기 때문에 알고리즘에 익숙해지기 전까진 메서드를 사용하더라도 풀어내는 데 의의를 두는 게 좋다고 본다. 그런 점에서 이번엔 객체 메소드 중 keys, values, entries, assign 4가지를 정리하려고 한다. Object.keys() keys() 메서드는 객체 키값을 배열로 반환한다. const heart = { one: 'love', two: 82, three: true }; console.log(Object.keys(heart));// ["one", "two", "three"] Object.values() values() 메서드는 객체 값을 .. 2022. 10. 3.
Class Component & Functional Component 리액트는 컴포넌트로 이뤄져있다. 컴포넌트로 시작해 컴포넌트로 끝난다 해도 과언이 아니다. 이 컴포넌트를 만드는 데 두 가지 방식이 있다. 클래스 컴포넌트(Class Component)와 함수 컴포넌트(Functional Component)다. 결론부터 말하면 여러 이유로 함수 컴포넌트가 더 낫다. Class Component 리액트가 처음 세상에 나타났을 때 컴포넌트는 클래스형 컴포넌트가 장악했다. 이 클래스는 물론 자바스크립트에 있는 그 클래스에서 가져왔다. 사용 방식도 거의 같다. class Welcome extends React.Component { render() { return Hello, {this.props.name}; } } 클래스 컴포넌트가 많이 쓰인 이유는 정교한 작업을 할 수 있었기 .. 2022. 10. 1.
useEffect 처음 페이지를 불러올 때 한 번만 로드하고 싶은 게 있다면 useEffect가 필요할 때다. 서버에서 초기값을 가져올 때, 그리고 리렌더링이 필요하지 않을 때 정말 유용한 hook인 듯하다. 물론 useEffect에는 다른 기능도 더 있다. useEffect 사용 방법 3가지를 정리했다. 사용 방법 useEffect 기본 폼은 아래와 같다. 이게 무언가 싶을 수 있지만 한 가지씩 뜯어보자. import { useEffect } from "react"; export default function UseEffectPage() { useEffect(() => { return () => {}; }, []); return ( ); } 1. 웹 처음 업로드할 때 한 번만 실행 기본 코드 useEffect(() =>.. 2022. 9. 30.
useRef 리액트를 사용하다보면 DOM에 접근하고 싶을 때가 한 두번이 아니다. 자바스크립트로만 할 때는 getElementbyId나 getElementbyClass 혹은 querySeletor를 통해 쉽게 접근했다보니 리액트로 웹을 만들다보면 자연스레 DOM을 가져올 생각부터 든다. onChange나 onClick 이벤트를 통해 쉽게 이벤트 객체를 가져올 수도 있지만, 태그 자체를 가져와할 때도 있다. 이럴 때 useRef를 주로 쓴다. 사용법 파일 첨부를 예로 들어 설명하고자 한다. 파일 첨부 시 대부분 input 태그 자체를 사용하지만, 별도로 디자인해 사용하기도 한다. 이러 때 useRef를 이용한다. import { useRef } from 'react' export default UseRefPage(){.. 2022. 9. 29.
Pagination vs Infinite Scroll 게시글이 많아지면 당연히 다음 페이지를 넘어가는 번호가 뜬다. 우린 이게 당연한 줄 알고 살았다 웹이 나온 후로 계속. 그러나 무한 스크롤이라는 새로운 페이지 업데이트 방법이 나타나며, 우리는 두 가지 선택지를 얻었다. 페이지네이션(Pagination), 무한 스크롤(Infinite Scroll) 장단점을 정리해봤다. 페이지네이션 우리가 보는 페이지 넘기는 모든 방식이 페이지네이션이다. 숫자든 화살표든 그 원리는 같다. 전체 게시물 수에서 해당 페이지에 보여줄 게시물 만큼씩 제외하면 해당 페이지 갯수가 나온다. 장점 현재 페이지를 알 수 있고, 원하는 페이지를 찾아갈 수 있다. 마지막 페이지를 가늠할 수 있어, 시간과 정보량에 대한 감을 느낄 수 있다. 특정 항목의 페이지를 파악할 수 있다. 단점 일일이.. 2022. 9. 28.

티스토리툴바