React

React ⭐ 리액트(React)는 페이스북에서 개발한 오픈소스 UI 라이브러리로, 유저 인터페이스를 만들기 위한 Javascript 라이브러리 이다. 개발자가 직접 DOM을 다루지 않아도 React가 데이터 상태에 따라 자동으로 UI를 관리해주므로 특정 상태에 따른

1. 작업 환경 설정 ✔ 1.1 Node.js Node.js는 자바스크립트가 브라우저 밖에서도 동작하게 하는 환경을 뜻한다. React 애플리케이션은 웹 브라우저에서 실행되는 코드라서 Node.js가 필요 없지만, 프로젝트를 개발하는데 필요한 도구(Webpack, Ba

1. JSX ✔ JSX(Javascript Syntax Extension)은 말 그대로 자바스크립트의 확장 문법으로 XML과 매우 비슷하다. JSX 형식으로 작성된 코드는 브라우저에서 실행되기 전 코드가 번들링되는 과정에서 Babel을 사용하여 일반적인 자바스크립트 형

1. state ✔ state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다. 즉, props를 바꾸려면 부모 컴포넌트에서

1. 이벤트 핸들링✨ 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트(event)라고 한다. 예를 들어, 버튼에 마우스 커서를 올렸을 때는 onmouseover, 클릭은 onclick, Form 요소는 값이 바뀔 때 onchange 이벤트를 실행한다

Reference ✔ ref(Reference)는 HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법을 뜻한다. 특정 DOM 요소에 작업을 해야할 때 id를 달면 css에서 특정 id에 특정 스타일을 적용하거나

1. 반복되는 컴포넌트 ✔ > * 웹 애플리케이션을 만들다 보면 아래와 같이 반복되는 코드가 있다. 위 처럼 코드가 더 복잡하거나 코드양이 더욱 늘어나게 되면 파일 용량도 증가하게 되는데 이것은 낭비이다. 이러한 문제점을 리액트 프로젝트에서 효율적으로 보여주고 관리

1. 라이프사이클 ✏ 라이플 사이클(수명 주기)은 모든 리액트 컴포넌트에 존재한다. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이난다. 컴포넌트의 라이플 사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있다. \* 함수형

1. 라이프사이클 메서드 정리 ✍ 1.1 render() 함수 라이프사이클 메서드 중 유일한 필수 메서드이다. 이 메서드 안에서 this.props와 this.state에 접근할 수 있으며, 리액트 요소를 반환한다. 예를 들어, div 태그, 컴포넌트 등 주의할점❗

1. Hooks ⭐ > Hooks는 리액트 16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공한다. 실습을 진행하기 위해 create-react-app을 사용

1. hooks ⭐ hooks를 처음 본다면 hooks (1)을 참고하면 된다. 1.1 useMemo useMemo를 사용하면 함수형 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다. src/Average.js 파일을 생성하여 리스트에 숫자를 추가하면 추가된 숫자

리액트에서 컴포넌트를 스타일링할 때는 아래와 같이 다양한 방식을 사용할 수 있다. 일반 CSS: 컴포넌트를 스타일링하는 가장 기본적인 방법이다. Sass: 자주 사용되는 CSS 전처리기 중 하나로 확장된 CSS 문법을 사용하여 CSS 코드를 쉽게 작성하도록 해준다. C

1. CSS Module ✍ CSS Module은 CSS를 불러와서 사용할 때 크래스 이름을 고유한 값 형태로 만들어 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지하는 기술이다. \* 즉, [파일이름]\[클래스이름]\[해시값] 형태로 생성 사용 방법은 .modul