I'm a Fig, Not a Pig

React 에서 SVG를 사용하는 방법은 두 가지가 있다. 1. tag 사용하기 import Logo from 'assets/icon-logo.svg' 이 방법은 흔히 사용되는 방식으로, SVG 파일을 외부 리소스로서 로드하여 태그를 통해 사용한다. 이 방법은 간편하고 직관적이지만, SVG 내부의 요소에 동적으로 접근하거나 스타일을 변경하는 등 SVG의 일부 기능을 활용하기 어렵다는 단점이 있다. 2. ReactComponent 이용하기 import { ReactComponent as Logo } from 'assets/icon-logo.svg' 이 방법은 SVG 파일을 React 컴포넌트로서 불러와 사용하는 것이다. 이렇게 하면 SVG 파일 내부의 요소에 접근하여 스타일을 변경하거나 이벤트를 추가하는 ..

저번 데일리 퀴즈 문제를 내면서 import React from 'react'; 를 왜 적어줘야 하는지에 대한 글을 발견했다. import React from 'react';를 적어줘야 하는 이유는 다음과 같다. 브라우저는 HTML, CSS, JavaScript만 읽을 수 있기 때문에 우리가 작성한 React를 읽지 못한다. 따라서 React로 작성한 코드를 브라우저가 읽을 수 있도록 변환해 주어야 한다. 리액트에서 JSX 문법을 사용하는데, 이 JSX 문법을 자바스크립트로 변환시킬 때 JSX transformer를 사용해 JSX로 작성된 React 메소드를 변환시킨다. 이때 객체인 React를 가져오기 위해서 import React from ‘react’를 맨 위에 작성해 React를 불러오게 되면 객..

https://codingtoddlerr.tistory.com/231 위 글을 작성하고 나서 궁금한게 생겨 글을 쓴다. 리액트가 상속보다 조합에 특화된 언어이기 때문에 여러 컴포넌트를 import 하는 방식으로 조합해서 사용하는 것이 재사용성과 유연성 증대에 이점이 된다는 것은 알겠다. 그러면 많은 수의 컴포넌트를 import 하는 경우 import 구문이 엄청 길어질 것 같은데, 이것들은 어떻게 처리하면 좋을지에 대해 궁금했다. 찾아본 방법은 다음과 같다. 1. index.js 파일 생성 다음과 같은 코드가 있다고 하자. App.js Register Close × Register 폴더 구조는 아래와 같다. 중요한 점은 해당 폴더 내의 컴포넌트를 모두 한 번에 내보내는 파일로 각 index.js 를 생성..

리액트에는 DRY 원칙이라는 개념이 있다. "Do no Repeat Yourself" 개발을 할 때 동일한 소스코드가 반복되는 것을 막으라는 뜻이다. 동일한 소스코드가 반복되는 경우 추후 수정사항이 생기면 반복되는 모든 코드를 찾아서 수정 해야 하기 때문에 잠재적인 버그의 위협을 증가시킨다. 이것은 프로젝트의 규모가 커질수록 반복되는 코드로 인한 유지 보수 오버헤드가 커지게 되므로 작은 프로젝트부터 코드를 반복해서 사용하지 않는 습관이 중요하다. - 오버헤드란? 오버헤드란 프로그램의 실행흐름에서 나타나는 현상중 하나로, 예를 들어 프로그램의 실행흐름 도중에 동떨어진 위치의 코드를 실행시켜야 할 때 추가적으로 시간,메모리,자원이 사용되는 현상이다. 한마디로 정의하자면, 오버 헤드는 특정 기능을 수행하는데 ..

목차 1. ref prop 2. useRef 3. 예제 1. ref prop JavaScript 를 사용 할 때는 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택한다. 리액트를 사용하는 프로젝트에서도 DOM을 직접 선택해야 하는 상황이 발생하는데 이 때 ref라는 것을 이용한다. 사용 예시는 크게 두 가지로 나눌 수 있다. 1. DOM 요소 참조 useRef를 통해 특정 DOM 요소를 참조하여 직접 제어할 수 있다. 2. 변수 참조 useRef를 통해 변수의 값을 렌더링 사이클과 관계없이 저장하고 관리할 수 있다. 이렇게 하면 렌더링이 발생해도 값은 그대로 유지되고 값의 변경이 컴포넌트의 리렌더링을 유..

1. 제어 컴포넌트 인풋 태그의 value 속성을 지정하고 사용하는 컴포넌트이다. 리액트에서 인풋의 값을 제어하는 경우로 리액트에서 지정한 값과 실제 인풋 value 의 값이 항상 같다. 이렇게 하면 1. 값을 예측하기가 쉽고 2. 인풋에 쓰는 값을 여러 군데서 쉽게 바꿀 수 있다는 장점이 있어서 리액트에서 권장하는 방법이다. 이때 State냐 Prop이냐는 중요하지 않고 리액트로 value 를 지정한다는 것이 핵심이다. 아래 두 경우 모두 제어 컴포넌트이다. function TripSearchForm() { const [values, setValues] = useState({ location: 'Seoul', checkIn: '2022-01-01', checkOut: '2022-01-02', }) co..

목차 1. DOM (Document Object Model) 이란? 2. DOM의 문제점 3. Virtual DOM 보통 자바스크립트를 배우면서 자연스럽게 리액트도 배우게 된다. 그럼 리액트를 왜 사용하게 됐냐는 질문을 받으면 뭐라고 답해야 할까? 많은 사람들이 사용하니까, 인기있는 라이브러리니까 등 여러 답변이 있겠지만, 만족스럽지는 못한 답변이라고 생각한다. 그래서 앞으로 리액트의 등장배경, 내부동작들을 정리하며 어떠한 이유에서 리액트가 등장했고, 또 왜 리액트를 사용해야 하는지에 대해 공부하려고 한다. DOM은 HTML, CSS, JS를 익히면서 알게된 개념인데, 리액트에서 Virtual DOM 이라는 개념으로 또 만나게 됐다. Virtual DOM이란 무엇일까? 우선 DOM의 의미부터 살펴보자. ..

1. initial 모든 CSS 속성에는 기본값(initial/default value)이 있다. 예를 들면 대부분의 브라우저에서 color 속성의 기본값은 black이다. initial 속성값은 해당 속성을 기본값으로 초기화 시켜준다. 따라서 태그의 중첩이 있을때 부모 요소의 속성을 상속받지 않고 기본값으로 초기화 하고 싶은 경우 사용할 수 있다. 다음 예제를 살펴보자. This is heading This is a paragraph.This is child element! h1 { font-size: 2rem; } p { font-size: 1.5em; } span{ font-size: initial; color: tomato; } body 태그는 자식 요소로 h1 태그와 p 태그를 가진다. p 태그..

로그인 .logo와 .logo_img 사이에 작은 공백이 생겼다. 단순하게 아래와 같이 a 태그를 공백없이 모두 붙여주면 해결 되지만 가독성이 좋지 않아서 잘 사용하지 않는다. 따라서 공백을 제거하려면 .logo에 font-size: 0;을 적용하면 된다. .logo { font-size: 0; }

목차 1. flex-basis 2. flex-grow 3. flex-shrink 1. flex-basis flex-basis는 flex 아이템의 크기를 설정하기 위해 존재하는 속성이다. 아이템의 크기를 직접 설정한다는 점에서 width와 유사하지만 1. flex-basis는 width나 height와 달리 flex-direction의 영향을 받는다는 점 2. flex-basis와 width가 동시에 적용될 경우 flex-basis가 더 높은 우선순위를 갖는다는 점의 차이가 있다. flex-basis의 기본 값은 auto로, - width를 따로 설정하지 않으면 컨텐츠가 차지하는 width와 같은 값이되고 - width를 설정하면 설정값과 동일한 값이 된다. .container { display: flex..