맨 땅에 프론트엔드 개발자 되기

React와 setInterval의 관계 리액트는 상태값이 변하면 재렌더링을 한다. 그래서 리액트에서 상태라는 개념에 대해 알고 있어야 앞으로의 내용이 이해가 가능하다. 아래 예제는 1초에 한번씩 count의 숫자를 1씩 증가시켜서 렌더링을 하도록 만드는 것이다. 문법적으로는 잘 동작하는 코드처럼 보이지만, 리액트에서는 상태값이 변화될 때 마다 재렌더링이 되기 때문에 setInterval 함수가 여러번 다시 실행되어 에러가 난다. 나의 경우에는 숫자가 변하는 속도가 갈수록 빨라졌다. (setInterval이 여러 번 실행되어 중첩된 것으로 추정) import { useState } from "react"; export default function Example() { let [count, setCoun..

create-react-app을 통해 프로젝트를 생성하면 상대 경로로 import를 하게 되는데, depth가 깊어질 수록 상대 경로 import가 불편해지기 때문에 절대 경로를 사용하는 것이 편하다. 사용방법 - tsconfig.json / jsconfig.json package.json 과 같은 레벨에 위의 이름으로 파일을 생성해준다.(TypeScript/JavaScript) 그리고 json 파일 내부에 아래와 같이 작성한다. { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } 서버를 다시 실행해준다. import '../components/Component'; 에서 import 'components/component'; 로 변경해서 작성..

styled-components를 사용하는 이유 CSS in JS 는 웹 개발 방식의 한 방법으로 JS 파일 안에 CSS 작성해서 경우에 따라 JS 로 CSS 변경을 용이하게 만들어 스타일링 변경이 가능한 컴포넌트를 사용할 수 있게 해주는 하나의 방법이다. Tagged Template Literal을 이용하여 함수의 파라미터로 템플릿 리터럴을 받는 기술인데 복잡하므로 원리를 이해할 필요는 없다. npm i styled-components 기본 문법 import styled from 'styled-components'; // Create a Title component that'll render an tag with some styles const Title = styled.h1` font-size: 1...

리액트에서 탭 기능 구현은 state를 이용해서 간단하게 구현할 수 있다. 완성예제 소스코드 import { useState } from "react"; import styles from './scss/tab.module.css'; export default function Tab() { const data = [ { id: 0, title: "HTML", description: "HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used t..

useParams 란? react-router에서 제공하는 Hooks 중 하나로 React 16.8 버전 이상에서만 구동이 가능하다. Parameter(파라미터) 값을 URL을 통해서 넘겨서 넘겨받은 페이지에서 사용할 수 있도록 도와준다. 예를 들어, 여러 개의 영화 정보가 담겨있는 데이터를 출력해준다고 가정할 때, 영화 제목을 클릭해서 세부 페이지로 이동을 하도록 구현한다면, 영화의 id 값을 URL로 넘겨 세부 페이지에 id 값에 해당하는 영화 정보만 출력하도록 만들 수 있도록 도와준다. useParams 문법 useParams를 사용하기 위해서는 먼저, react-router-dom을 설치해야한다. npm install react-router-dom 먼저, 라우팅을 구현할 페이지들을 생성한 뒤에 디..

useEffect 란? React 의 함수형 컴포넌트에서 라이프사이클을 감지하기 위한 HOOK 이다. 처음에 라이프사이클이란 말을 들었을 때, 너무 거창한 단어가 붙어있는 것 같아서 이해가 잘 되지 않았었다. 그러나 React가 CSR(클라이언트 사이드 렌더링) 방식이라는 점을 기억하고 있으면, 렌더링 규칙에 대해 알고 있어야 컴포넌트 제어가 가능하다는 것을 느낄 수 있다. - React 라이프사이클 대표적인 라이프사이클에는 아래와 같은 것들이 있다. 라이프사이클 명 설명 componentDidMount 컴포넌트의 첫번째 렌더링을 마치고 난 뒤 호출되는 메소드다. 이미 컴포넌트가 화면에 나타난 상태이고, 이 시점에 보통 해당 컴포넌트에서 필요로 하는 데이터를 요청하기 위해 axios, fetch 등을 이..