React JS

Make a converter with many units. 원리

리액트 배우면서 우와 이런 신세계가 있다니라며 놀랐었다.배움의 즐거움도 잠시.. 기능 파트를 끝내고 디자인을 하러 넘어 온 css를 작성하며 일종의 난관에 봉착했다."이 css파일은 어느 폴더에 넣어야 하지...?"가장 효율적인 방식으로 한 눈에 봐도 뭐가 뭔지 딱딱

React | Font Awesome Docs React에서 Font Awesome을 시작하려면 npm 및 yarn 같은 패키지 관리자를 사용하여 패키지를 설치해야 한다. 01. 세팅 SVG + JS 메서드를 사용하여 아이콘을 렌더하는 방식(v.6.1.1.) 1. SVG Core 추가하기 먼저 npm을 사용하여 아이콘을 작동시키는 모든 유틸리티를 포...

리액트 작업을 하면서 마크업을 할 일이 생각보다 많은데 기존 html에서 쓰던대로 emmet을 사용하려 했더니 안되는 것이 아닌가! 구글링하니 쉽게 react에서 emmet사용하는 방법을 찾았다. 먼저 아래로 들어가서 이멧을 세팅하자! Code > Preference > Settings > Workplace > Include Languages >It...

useEffect 무한 루프 탈출하기

일부 자바스크립트 함수는 순수하다. 순수 함수는 계산만 수행하고 그 이상은 수행하지 않는다. 컴포넌트를 순수 함수로만 엄격하게 작성하면, 코드 기반이 증가함에 따라 전체 클래스의 당혹스러운 버그와 예측할 수 없는 동작을 피할 수 있다. 그러나 이러한 이점을 얻기 위해서

한 컴포넌트 내에서 여러개의 상태를 저장해야할 때 어떻게 해야할까? 1. 각각 따로 구분하여 다수의 state 생성하여 상태 관리 2. 객체로 묶어 하나의 state를 만들어 상태 관리 기존 상태에 의존하여 상태를 업데이트해야 할 경우 상태를 업데이트하는 방법 3

브라우저는 form이 제출될 때 마다 웹페이지를 호스팅하고 있는 서버에 요청을 보내기 때문에 페이지를 리로드한다. JS로 수동으로 데이터를 수집하여 결합하는 방법으로 폼을 제출하고 싶다면 이러한 기본 동작을 비활성화 하면 된다.event.preventDefault();

React의 상향식 통신 예제 > 📍 현재 컴포넌트 구조 App(비용 data 배열) > NewExpense > ExpenseForm(새로운 비용 data 생성) 📍 App.js 📍 NewExpense.js 📍 ExpenseForm.js 새로운 비용을 기존의 비용 목록에 추가하려면 어떻게 해야할까? ExpenseForm 컴포넌트에서 새롭게...

자식 컴포넌트에서 이미 부모 컴포넌트로부터 props로 데이터를 받고 있다면, 이 데이터를 활용하여 filter() 메소드를 사용하면 된다.filter()는 true나 false를 반환하는데, true를 반환하는 항목들을 새로운 배열로 반환된다.filter()는 완전히

조건부 컨텐츠는 각각 다른 상황에서 다양한 출력값을 렌더링하는 것이다. ✅ 삼항연산자 >조건(삼항)연산자 조건(삼항)연산자는 JavaScript에서 세 개의 피연산자를 받는 유일한 연산자이다. 앞에서부터 조건문, 물음표(?), 조건문이 참(truthy)일 경우 실행할