[React] && 를 이용한 조건부 렌더링, 불필요한 0 렌더링 이유
boolean 값에 따라 렌더링 유무가 결정이 된다면 &&연산자를 사용하는게 더욱 효율적이라고 배웠다. 스터디 실습 과제로 숫자야구를 구현했고, 배운대로 && 연산자를 잘 사용하고 조건에 따라 렌더링도 잘 되는 것을 확인 할 수 있었다. 하지만 입력창 하단에 보이는 난데없는 0의 등장…😭 F12를 눌러 개발자 모드에서 html 파일을 봤을 때에 저 0이 단순 텍스트로 나와서 원인을 찾는데에 애먹었었다. 그리고 곧 이게 && 연산자를 조건부 렌더링 시 잘못 사용한 예제라는 것을 파악할 수 있었다. 🎯 원인 분석 리액트 공식문서에 있는 조건부 렌더링에 대해 살펴보자. JavaScript에서 true && expression은 항상 expression으로 평가되고 false && expression은 항상 f..
[React] drag로 select 하기 / selecto 사용법
when2Meet이라는 그룹 일정 조율 사이트를 리뉴얼하는 프로젝트에 참여하게 되었다. 해당 웹 사이트에서의 주요 기능 중 하나가 드래그 해서 되는 일정을 선택할 수 있도록 하는 건데, 그 부분이 핵심이라 팀장이 일주일 동안 공부하고, 간단하게 구현까지 해보라는 과제를 내주셨다! 그래서 이것저것 알아보니, 우리 프로젝트에 딱 알맞는 react-table-drag-select 라는 모듈이 있었으나 현재는 deprecated 되어 사용할 수 없었다. dragselect 라는 개인 개발자가 만든 모듈이나, 생명주기를 이용하여 구현을 하신 분도 있었다. 하지만, 리액트에서 생명주기 함수까지 사용하고 싶지는 않았고, 더 대중적인 모듈을 찾고자 했다. 그 와중에 발견한 한줄기 빛이 바로 react-selecto....
[React] JSX와 Props란? JSX와 Props 특징 요약
💻 리액트 리액트의 가장 큰 장점은 재사용성이다. 화면에 띄워지는 모든 요소들을 '컴포넌트'라는 조각의 형태로 쪼개어 필요한 곳마다 다시 쓸 수 있도록 한다. 이러한 특성 때문에 리액트에서는 "상속"의 개념 대신 "합성"의 개념에 보다 적합하다. 이 합성은 바로 JSX라는 새로운 꼴을 통해 이루어진다. 🎯 JSX란? : HTML과 비슷해보이지만, JS와 XML이 합쳐져 있는 꼴, XML 문법으로 코드를 작성하면 Babel과 같은 도구가 JS로 변환시켜준다. 📚 JSX 특징 열린 태그와 닫힌 태그는 쌍으로 존재 열린 태그와 닫힌 태그 사이에 아무것도 없는 경우 와 같이 한번에 열고 닫는 Self Closing HTML에서는 닫지 않는 input, br도 마찬가지로 닫아줘야한다, ex) , 하나의 컴포넌트에..
