요즘 프론트엔드 개발자 구인글을 몇 개만 살펴봐도 필수 자격 요건에 React는 빠지지 않고 등장한다. 또한 현재 사내 기술 스택 역시 리액트를 메인으로 사용하고 있기도 하다.그렇다면 왜 우리팀은 리액트를 사용하고 있으며 여러 기업에서도 프론트엔드 개발자의 필수 스택일까? (그만한 이유가 있어서 일텐데,, )먼저 리액트의 컴포넌트, 가상돔 등 기초 개념에 대해 알아보도록 하자 👀 ReactReact는 Facebook(현재 Meta)에서 개발한 'UI를 구축하기 위한 자바스크립트 기반의 라이브러리'이다. 전 세계에서 Node.js 다음으로 점유율이 높은 웹 개발 기술이다. 2023년 기준으로 전 세계 웹 개발자의 40.58%가 리액트를 사용한다고 한다. 흔히 아는 인스타그램, 페이스북, 에어비엔비, 디스..
리액트로 프로젝트를 진행하다보면 useEffect를 반드시 한 번은 사용해야할 상황이 온다. useEffect는 컴포넌트의 생명주기 동안 발생하는 여러 작업(데이터 패칭, 구독 설정, 타이머 설정, 상태 변화 감지 등)을 처리하는 데 필수적인 훅이다.그럼 useEffect란 무엇이며 어떤 형태들이 존재하는지 알아보자! useEffect란컴포넌트가 마운트 되었을때, 업데이트 되었을때, 언마운트 되었을때 특정 작업을 실행시켜주고 싶다면 useEffect를 사용해야한다. 기본적으로 useEffect 훅은 인자로 콜백함수를 받으며, 원하는 작업의 코드를 콜백함수 내부에 작성해주면 된다.콜백함수란, 다른 함수의 인자로 전달된 함수를 의미한다. useEffect의 형태1.첫 번째 형태로는, useEffect의..
리액트로 개발할 때 함수형 컴포넌트를 사용한다면, 리액트의 hooks를 활용할 수 있다.그중에서도 useState에 대해 알아보자! 🤩 State란먼저 State란, 컴포넌트가 가질 수 있는 상태를 의미한다. 예를 들어 시계라는 컴포넌트가 있다면 이 시계는 상태값으로 현재 시간을 가지고 있을 것이다. useState가 컴포넌트의 상태를 간편하게 생성, 업데이트할 수 있도록 도구를 제공해 준다. 위와 같은 방식으로 state 생성과 동시에 가져야 할 초기값을 useState 함수의 인자로 넣어주면 state와 setState라는 두 가지 요소를 배열 형태로 리턴해준다. 현재 상태값은 state 변수에 들어있고, state를 변경시키고 싶을 때는 setState를 이용하여 변경시켜 줄 수 있다. stat..
리액트 프로젝트 생성시 UI만 제공되기 때문에 직접 구축해야하는 것들이 많아 번거로운 점이 있다. CRA (Create React App)는 Webpack, Babel 등의 도구를 직접 설정할 필요 없이, 기본적인 개발 환경을 자동으로 구성해주기 때문에 많은 개발자들이 사용하는 도구이다. Node.js 설치는 필수이며 IE는 지원하지 않는다 😂 리액트 프로젝트 생성하기- Reactnpx create-react-app 폴더명 - React + typescriptnpx create-react-app 폴더명 --template typescript + 참고로 폴더를 한 번 더 만들지 않고 현재 파일에 생성하고 싶다면 npx create-react-app . npx create-react-app . --temp..
리액트가 많은 사람들에게 사랑받는 이유 중 하나는 빠른 속도인데,빠르고 효율적이게 페이지를 브라우저에 그려주는 가상돔 (Virtual DOM) 덕분이다.가상돔을 알아보기 전에, DOM이 무엇인지 먼저 살펴보자 🧐 DOM (Document Object Model) 이란?브라우저를 통해 웹 사이트에 들어가면, 제목 사진 버튼 등 다양한 요소들을 볼 수 있다.이런 하나하나의 요소들을 Elements 라고 부르고 이 모든 것을 담고 있는 웹 페이지를 Document(문서)라고 부른다.브라우저는 이 페이지에 해당하는 HTML을 분석해서 화면에 띄워준다.DOM이란, 웹페이지에 들어가 있는 HTML 요소들을 tree형태의 구조로 표현한 것이다.DOM Tree 안에는 각각의 element에 상응하는 node가 들어있..
리액트에서 여러 element들을 반환할 때는, 각각의 element 마다 고유한 key를 넣어줘야 한다. 만약 key 값을 넣어주지 않으면 렌더링에는 문제가 없지만 아래와 같은 에러가 나타난다. 👿여태 그저 경고 메시지를 지우기 위해 key값을 넣어주었다면 앞으로는 알고 쓸 수 있도록 하자! Key 값을 넣어줘야 하는 이유위와 같이 항목을 추가할 수 있는 list를 만들어 알아보자!추가할 항목 적어 추가 버튼을 눌러주면 , 우측의 개발자 도구에서 모든 li태그가 깜빡거리는 걸 볼 수 있다.깜빡였다는 것은 DOM상에서 업데이트되었다는 뜻이다. 우리는 리스트 맨 위의 항목 하나만 추가했을 뿐인데 모든 요소들이 업데이트되었다는 것을 알 수 있다.-> 그 이유는 key 값을 주지 않았기 때문에 리액트는 어..
