React

리액트는 구조가 MVC, MVW등인 프레임워크와 달리, 오직 V(view)만 신경쓰는 라이브러리이다. 리액트 프로젝트에서 특정부분이 어떻게 생길지 정하는 선언체가 있는데 이를 컴포넌트라고 한다. 컴포넌트는 재사용이 가능한 API로 수많은 기능들을 내장하고 있으며, 컴포

JS의 확장 문법이며 XML과 매우 비슷하게 생겼다. 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 JS형태의 코드로 변환된다.위와 같은 코드를 매번 작성하면 매우 불편할 것이다. JSX를 사용하면 매우 편하게

리액트를 사용하여 애플리케이션의 인터페이스를 설계 할 때 사용자가 보는 요소는 여러 가지 컴포넌트로 구성되어 있다. 컴포넌트의 기능은 단순한 템플릿 이상이다. 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 주는 것은 물론이고, 라이프사이클 API를 이용하여 컴포넌트

4. 이벤트 핸들링 >사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트라고한다. ex)타겟에 마우스커서를 올렸을 때는 onmouseover 이벤트를 실행, 클릭했을 때는 onclick를 실행하는것과 같다. 자세한 내용은 리액트 공식홈페이지 에서 확인

HTML에서 DOM 요소에 id를 달아 사용하듯 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 있다. 그것이 바로 ref(reference의 줄임말) 개념이다.ref를 사용하는 상황은 'DOM을 꼭 직접적으로 건드려야 할 때'이다. 예를 들어 input을 검증할

웹 애플리케이션을 만들다 보면 반복되는 코드를 작성할 때가 있다. (ul태그안의 li같은 것들) 하지만 코드가 좀 더 복잡하다면 어떨까? 코드의 양도 늘어나고, 파일의 용량도 증가할 것이다. 이는 낭비이다. 또한 보여주어야 할 데이터가 유동적이라면 이런 코드는 관리하지

모든 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존대한다. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝난다. 프로젝트 진행시 컴포넌트를 처음으로 렌더링할 때, 혹은 컴포넌트를 업데이트하기 전후로 어떤작업을 처리해야 할

Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수 컴포넌트에서 할 수 없었던 다양한 작업을 할수 있게 해준다.useState

Hooks(1) 에서 정리한것에서 이어서 작성해보려고 한다.😊useRef Hook은 함수 컴포넌트에서 ref를 쉽게 사용할 수 있도록 해준다. 지난번에 정리한 클래스컴포넌트에서 ref를 사용하는 방법에선 콜백 함수를 통한 설정과 createRef를 통한 ref설정을

리액트에서 컴포넌트를 스타일링할 때는 다양한 방식을 사용할 수 있다. 정해진 방식은 없지만 프로젝트마다 요구하는 스펙이 다르고, 취향이 다르기 때문에 취향에 맞게 사용하면 된다.소규모 프로젝트를 개발하고 있다면 스타일링 시스템을 적용하는것이 번거로울수 있다. 그런 상황