프론트페이지를 쌩자바스크립트로 만들라고 하면, 코드가 너무 길어지고, 복잡해지는 단점이 있다. 이러한 단점을 보완해주기 위한 자바스크립트 라이브러리에는 React, Vue, Svelte, SolidJS 등이 있는데, 이 중, 리액트가 가장 레퍼런스가 많고, 유저가 많다
리액트에서의 state 정의 및 사용방법 > 일반 자바스크립트에서는 데이터를 저장하기 위해 let 변수이름 = '데이터'; 라는 식으로 변수에 데이터를 저장했었다. 하지만 리액트에서는 보통 변수 말고, state를 만들어서 데이터를 저장한다. 데이터의 값이 잘변 하지
리액트는 긴 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공하는데 이를 Component라고 한다.이걸 이용하면 함수와 변수 만들듯 HTML을 깔끔하게 한 단어로 치환해서 원하는 곳에 꽂아넣을 수 있다. 다음은 모달창을 컴포넌트화 해서 html에 꽂아
동적인 UI란 유저가 조작시 형태가 바뀌는 모달창, 탭, 서브메뉴, 툴팁 경고문 등의 UI들을 의미한다. 리액트에서 동적인 UI를 만드는 순서는 보통 아래와 같다.1.html css 등을 이용하여 UI 창을 미리 디자인 해 놓는다.2.UI의 현재 상태를 state로 저
다음과 같은 코드를 실행해보자.위 코드는 Modal 컴포넌트를 App 컴포넌트 안에 삽입하는 코드이며, 예상대로라면, 글제목0 부분에 '남자코트 추천'이 떠야한다.하지만 이 코드를 실행 시켜보면 예상과는 다르게 '글제목'이라는 변수가 define 되지 않았다는 에러가
회사에서 AgGrid와 CustomFooter 컴포넌트를 이용하여 Pagination 기능을 구현하고 있던 와중에 기능은 문제없이 잘 동작하는데, 개발자도구(F12)에 다음과 같은 Warning 메시지가 출력되는 것을 확인하였다.기능 구현에는 문제가 전혀 없었지만 개발