리액트

프로그래밍 과정을 나만의 언어로 표현할 수 있도록 노력하자!왜 React를 사용하게 되었을까? 웹이 발전하면서 어째서 React가 생겨나게 되었고 인기를 얻게 되었는지 생각해보자.초기 웹정적인 페이지의 향연. 인터넷은 정적인 정보 공유를 위한 곳.웹 2.0웹이 보급이

리액트는 웹과 네이티브 UI를 위한 라이브러리사실 React는 프레임워크가 아니라 라이브러리다! React만으로는 프레임워크로 불리기엔 제공해야 하는 기능들이 부족하다. 대신, 개발에 필요한 다양한 기능들을 자체 라이브러리가 아닌 서드파티 라이브러리(React-rout

컴포넌트 컴포넌트는 레고 조각이라고 생각하면 된다. 같은 레고 조각을 다양한 레고에 끼워 넣을 수 있듯, 컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각을 나눌 수 있다. JS 함수와 개념적으로 유사하다! prop라는 입력을 받으면 화면에 어떻게 표시되는지

props는 properties의 준말로, 컴포넌트끼리 데이터를 마치 속성을 사용하듯이 주고받을 수 있다.정확히는, 부모 컴포넌트가 자식 컴포넌트에게 물려주는 데이터다. 이를 단방향 데이터 바인딩이라 한다. 상태 관리 라이브러리 같은 외부 라이브러리를 사용하지 않는 이

선언형 프로그래밍 컴포넌트란 UI 요소를 표현하는 최소한의 단위이며 화면의 특정 부분이 어떻게 생길지 정하는 선언체다. 우리는 보여주고자 하는 UI 요소를 컴포넌트 내부의 JSX를 통해 선언만 하면 리액트가 화면에 그려준다. 명령형 프로그래밍과 비교 바닐라 JS를 이

CSS-in-JS 는 말 그대로 JS파일에 CSS 스타일을 정의하는 기법이다. 기존에는 HTML, CSS, JS는 각자 별도의 파일로 관리하는 것이 일반적이었지만, 최근에는 컴포넌트를 기반으로한 웹 개발이 대세가 되면서 한 컴포넌트 안에 모든 것을 욱여넣는 방법이 트렌

Hooks 리액트에서 훅이란 함수형 컴포넌트에서 사용할 수 있는 편리한 기능들이다. 어떤 종류들이 있는지 알아보자! useState useState는 상태 state와 상태를 변경하는 함수 setState를 생성한다. setState에 넣는 값은 새로운 상태가 되어

React는 Vue나 Angular에 비해 자유로워 프레임워크가 아닌 라이브러리라고 불리지만, 템플릿이 아예 없진 않다. CRA나 vite를 통해 손쉽게 React 애플리케이션을 구축할 때 필요한 필수 파일들을 불러올 수 있다. 그러나 개발에 마법은 없는 법. 어떻게

useEffect useEffect는 리액트 컴포넌트가 랜더링 된 이후마다 특정 작업을 수행하도록 설정할 수 있는 훅이다. 어떤 컴포넌트가 화면에 렌더링(=마운트 mount)되었을 때 또는 화면에서 사라졌을 때(=언마운트 unmount) 무언가를 실행하고자 한다면 이것

useRef는 리렌더링과 상관없이 값을 기억하기 위해 사용된다. 다시 말해, 컴포넌트가 계속 렌더링 되어도 언마운트 전까지 값을 유지한다.ref는 크게 두 가지 용도로 사용된다. state와 비슷한 역할을 하지만 ref에 저장한 값은 변경되더라도 렌더링을 일으키지 않기

일반적으로 리액트는 부모 컴포넌트에서 자식 컴포넌트로만 데이터를 전달 할 수 있다. 그래서 조상 컴포넌트가 데이터를 자손 컴포넌트로 보내기 위해서는 여러 컴포넌트를 거쳐거쳐 전달할 수 밖에 없었다. 이 깊이가 너무 깊어지면 prop drilling현상이 일어나게 된다.

리액트에서 리렌더링은 꽤나 빈번하게 일어난다. 그러나 리렌더링이 너무 자주 일어나면 비용이 발생하므로, 이를 최대한 줄이는 것이 도움이 된다. 이렇게 불필요한 렌더링이 발생하지 않도록 최적화하는 방법이 필요한데, 대표적인 방법이 3가지가 있다.React.memo : 컴

리덕스는 전역 상태 관리 라이브러리다. 상태를 저장하는 중앙 저장소가 있고 모든 컴포넌트가 이 저장소에서 상태를 사용할 수 있다. 중요한 점은 부모-자식 관계가 아니어도 되고, 자식 컴포넌트에서 만든 상태도 부모 컴포넌트에서 사용할 수 있다는 것이다. 애플리케이션의 크

기존 웹사이트는 새로운 페이지로 이동하기 위해서 웹 서버로 문서를 요청 후 받아와 렌더링하는 형식으로 작동했다. 그래서 많은 처리 시간이 필요했는데, CSR를 사용하는 React Router를 이용하면 한 페이지 내에서도 여러 페이지를 이동하듯 동작할 수 있다. 이 과