렌더링이란 리액트에서 렌더링이란 화면에 특정한 요소를 그려내는 것을 의미합니다. 이 렌더링 과정을 잘 처리해주는 것이 우리가 Vanila JavaScript를 사용하지 않고 React와 같은 UI라이브러리를 사용하는 이유입니다. 브라우저에서 렌더링이란 DOM요소를 계산하고 화면에 그려내는 것을 의미합니다. HTML과 CSS를 가지고 만들어진 DOM과 CSSOM은 서로 결합되어 브라우저에 그려집니다. 그리고 브라우저에서 제공하는 DOM API를 JavaScript를 통해 호출하면서 브라우저에 그려진 화면을 변화시키게 됩니다. 하지만 JavaScript를 이용해서 DOM을 직접 접근하고 수정, 최적화 하는 것은 애플리케이션의 규모가 커질 수록 관리하기가 힘들어집니다. React는 렌더링 과정을 대신 처리해주..
메모이제이션이란? 메모이제이션(memoization)은 컴퓨터 프로그램이 동일한 계산을 반복해야할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 실행 속도를 빠르게 하는 기술을 말한다.(캐시로 성능을 높이는 프로그램 기법) 알고리즘 문제를 풀 때 많이 사용되는 재귀함수(피보나치 수열)를 통해 메모이제이션을 알아보도록 하자. 피보나치 수열은 0과 1로 시작해서, 이전 두 개의 숫자를 더한 값을 다음 항으로 하는 수열을 말한다. 즉, 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, ...과 같은 형태를 가지며, 각 항은 그 이전 두 항을 더한 값으로 계산된다. 이 피보나치 수열을 재귀함수를 사용해서 함수..
라우팅이란? 웹 애플리케이션에서 라우팅이란 사용자가 요청한 URL에 맞게 페이지를 보여주는 것을 의미한다. 프로젝트가 하나의 페이지로 구성되어 있다면 라우팅이 필요 없겠지만, 여러 페이지로 구성된 웹 애플리케이션은 페이지 별로 컴포넌트를 다르게해서 관리하기 때문에 라우팅 시스템이 필요하다. React Router React Router는 리액트의 라우팅 관련 라이브러리로 컴포넌트 기반으로 라우팅을 설정할 수 있다. 리액트에서 라우터를 적용하는 방법은 두가지가 있다. 1. BrowserRouter 리액트 라우터를 적용할 때는 react-router-dom에 내장되어 있는 BrowserRouter와 Routes, Rout 컴포넌트를 사용한다. // Home.tsx const Home = () => { ret..
로그인 또는 회원가입 등과 같이 사용자로부터 필요한 정보를 받아야 할 때가 있다. 일반적으로 값을 받아올 때는 input 요소를 사용한다. React에서 input 요소를 이용하여 사용자로부터 값을 받아 사용할 수 있는 방법은 무엇이 있을까? input의 값을 받아 사용하는 3가지 방법에 대해 알아보자. (아래의 예시는 React와 TypeScript, Styled-Component를 사용하였다.) 1. useState을 이용하여 input의 value 가져오기 가장 쉽게 해볼 수 있는 것은 React Hook 중에 하나인 useState을 사용하여 input의 값을 상태로 관리하는 방법이다. 먼저 useState을 사용하여 id와 password 변수를 선언한다. 그런 다음, setId와 setPass..
Router : 데이터의 경로를 실시간으로 지정해주는 역할을 하는 무언가 Routing 경로를 정해주는 행위 자체와 그런 과정들을 다 포함하여 일컫는 말 다른 주소에 따라 다른 뷰를 보여주는 과정으로, "경로에 따라 변경한다"라는 의미 Page Routing 우리가 인터넷을 사용해서 웹 사이트에 접속한다는 것은 브라우저를 통해서 웹 서버에게 경로의 요청을 전달하고 웹 문서를 받아보는 과정이다. 웹 서버가 요청에 명시되어 있는 경로에 따라 알맞은 페이지를 선택하고, 그 페이지를 반환해서 사용자가 해당 페이지에 접속하는 과정을 페이지 라우팅이라고 한다. MPA & SPA MPA(Multipage Application) 여러개의 페이지를 준비해 놓고 있다가 요청이 들어오면 요청에 맞게 적절한 페이지를 보내주는..
🌴 React State & Props State(상태)란 컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값을 말한다. 🌱 Props vs State 🍃 Props props는 외부로부터 전달받은 값(위로부터 인자와 같이 넘겨받음) - 변하지 않는 값을 말한다. (컴포넌트의 속성(property)을 의미한다.) 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값으로, 웹 애플리케이션에서 해당 컴포넌트가 가진 속성에 해당한다. 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값이다. React 컴포넌트는 자바스크립트 함수와 클래스로, props를 함수의 전달인자(arguments)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React엘리먼트를 반환한다. 따라서, 컴포넌트가 최초 렌더..
🌳 Tweet 버튼을 사용하여 작성된 글을 Tweeter의 가장 상단에 올리기 가장 먼저 생각해봐야 하는 것은 Tweet버튼을 클릭했을 때, input과 textarea에 작성된 내용을 받는 방법이다. 이때 onClick 이벤트 처리 방식을 사용하여 새로운 데이터 객체를 만들어준 후, dummy data의 가장 앞부분에 넣어준다. const handleButtonClick = () => { const getRandomNumber = (min, max) => { return parseInt(Math.random() * (Number(max) - Number(min) + 2)); }; const tweet = { id: users.length+1, username: userName, picture: `htt..
