본문 바로가기

분류 전체보기65

Class Component & Functional Component 리액트는 컴포넌트로 이뤄져있다. 컴포넌트로 시작해 컴포넌트로 끝난다 해도 과언이 아니다. 이 컴포넌트를 만드는 데 두 가지 방식이 있다. 클래스 컴포넌트(Class Component)와 함수 컴포넌트(Functional Component)다. 결론부터 말하면 여러 이유로 함수 컴포넌트가 더 낫다. Class Component 리액트가 처음 세상에 나타났을 때 컴포넌트는 클래스형 컴포넌트가 장악했다. 이 클래스는 물론 자바스크립트에 있는 그 클래스에서 가져왔다. 사용 방식도 거의 같다. class Welcome extends React.Component { render() { return Hello, {this.props.name}; } } 클래스 컴포넌트가 많이 쓰인 이유는 정교한 작업을 할 수 있었기 .. 2022. 10. 1.
힘든 만큼 재밌다 6시 30분 기상, 0시 30분 취침 짧은 취침, 정말 오랜만이다. 편입할 때도 이렇게 하지 않았다. 군대에서도 10시 취침 6시 기상인데 말이다. 아무튼 부트캠프 한 달간을 한 문장으로 정리하면, "힘든 만큼 재밌다"다. 사실 어느정도 미리 알아두고 간 게 있으니 첫 일주일은 새로운 것을 배워도 알고 있는 부분도 있기에 무난했다. 그럼에도 매일 있는 과제를 해치우느라 일찍 가는 건 쉽게 생각할 수 없었다. 2주차, 3주차가 되니 아는 게 바닥나고 체력도 떨어지기 시작했다. 이제부턴 정신력으로 버티며 가야함을 느꼈다. 첫번째 포트폴리오 한 달 간 자유게시판을 만들었다. 쓰기와 수정 페이지, 리스트 페이지, 디테일 페이지를 바탕으로 위아래 레이아웃을 덧붙였다. 배우면서 만들다보니 생각보다 허접하다. 그래서.. 2022. 9. 30.
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.

티스토리툴바