Front-end/React (6) 썸네일형 리스트형 [React] .css 와 .module.css 파일 비교 오늘도 내가 알고 있는 지식이 왕초보 수준임을 다시 한번 느꼈다. ㅋㅋ 나는 css 파일을 만들때 단 한번도 {클래스이름}.module.css 로 만든 적이 없었다. 당연히 모든 프로젝트에서 {클래스이름}.css 로 만들면서 코딩해왔다. 그렇다 보니 나는 분명 Button.css 파일을 Button.js 에만 적용하고 싶었는데 같은 클래스 이름을 가진 다른 컴포넌트들과 충돌 일어나는 문제가 발생했다. 예를 들어, Button.js / Button.css / App.js / App.css 가 각각 다음과 같다. - Button.js import "./Button.css"; function Button({ text }) { return {text}; } export default Button; - Butto.. [React] props 공부하기 props 에 대해 공부하면서 코드 리팩토링을 해야 하는 이유도 체감했다. 지금까지 여러가지 버튼을 만들때면 단순히 button 태그를 이용하고 클래스만 다르게 주었는데, 비슷한 버튼을 만드는 경우에도 공통 클래스를 주고 색상만 다른 클래스를 추가하는 방법으로만 진행했다. 예전에 팀 프로젝트를 하면서 styled-component 를 잠깐 쓴 적이 있는데 그때 이후로는 저렇게 클래스만을 통해서 코딩했다. 그러다 오늘 props 를 공부하면서 머리가 띵! 했달까? ㅋㅋ 먼저, 내가 원하는 건 두개의 버튼을 만드는 것이다. 여기서 버튼 안에 있는 텍스트와 이 텍스트의 크기만 다르게 하고 나머지 스타일은 같게 만들려고 한다. 평소 같았으면 이렇게 코딩했을 거다. 버튼1 버튼2 user-btn 에는 공통된 cs.. [에러해결] incorrect casing. Use PascalCase for React components, or lowercase for HTML elements. 컴포넌트에 대해 공부하면서 단순한 버튼 두 개를 만들었는데 다음과 같은 경고가 뜨면서 브라우저에 아무것도 보이지 않았다. 경고는 incorrect casing. Use PascalCase for React components, or lowercase for HTML elements. 이유는 컴포넌트 이름을 파스칼 표기법(pascal case) 로 하지 않아서였다. pascal case 는 첫단어를 대문자로 시작하는 표기법이다. saveBtn 이 아니라 SaveBtn 으로 했어야 한다. 내가 쓴 saveBtn 은 카멜 표기법(camel case)이다. (낙타처럼 생겼다고 하여 붙여진 이름이고 단어의 첫글자를 대문자로 하는데, 맨 첫글자는 소문자로 표시한다. 이 외에도 하이픈(-)을 사용하는 케밥 표기법(k.. import 이해하기 , JSX 이전 글에서 만든 프로젝트를 열면 여러 폴더들이 있습니다. node_modules 는 리액트 프로젝트를 만들때 함께 생성되는 폴더입니다. 여기에 react 모듈이 설치되고 import 를 통해 리액트를 불러와 사용할 수 있습니다. import React from 'react'; 여기서 모듈을 불러와서 사용하는 것은 원래 브라우저에는 없던 기능이고, 브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해주는 환경인 Node.js 에서 지원하는 기능입니다. 이러한 기능을 브라우저에서도 사용하기 위해 bundler 를 사용합니다. 대표적인 bundler 는 webpack 이 있습니다. 이를 사용하면 import 로 모듈을 불러왔을 때 모듈을 합쳐서 하나의 파일로 생성합니다. App.js 파일을 보면 SVG.. React 시작하기 저는 그동안 리액트를 사용하면서 처음부터 공부하기보다는 프로젝트를 하면서 그때그때 배우는 스타일로 리액트를 학습했습니다. 그래서 오늘부터는 천천히 리액트를 다시 공부해볼까 합니다. 먼저, 리액트 프로젝트를 만들어 줍니다. 방법은 다음과 같습니다. CRA (Create React App) 으로 생성을 하는 것인데, 이는 웹팩과 바벨 설치 및 설정 과정을 생략하고 프로젝트 작업 환경을 바로 구축할 수 있다고 합니다. yarn 을 사용하는 방법과 npx 를 사용하는 방법이 있는데, yarn 이 npm 다음으로 나온 것이라 속도도 빠르고 보안성이 좋다고 들었는데 속도도 지금은 비슷하다고 합니다. 저는 yarn 보다는 기존 방식인 npm 을 사용하고 있습니다. npx 는 npm5.2.0 버전에 새로 추가된 도구인.. Virtual Dom (가상 돔) 리액트의 주요 특징 중 하나는 Virtual Dom 입니다. 이를 포스팅하기 전에 DOM 에 대해 간단하게 정리해보겠습니다. DOM 이란 ? Document Object Model 의 약어이고, 문서의 구조를 객체로 표현하는 방법입니다. XML 이나 HTML 로 작성합니다. 웹 브라우저는 DOM 을 활용해 객체에 자바스크립트와 CSS 를 적용합니다. 아래 그림과 같이 DOM 은 트리 형태이기 때문에 특정 노드를 찾고, 수정하고, 제거하거나 원하는 위치에 삽입할 수 있습니다. 이런 DOM 은 동적 UI 에 최적화되어 있지 않다는 문제가 있습니다. 알다시피, HTML 은 정적이고 자바스크립트를 이용해 동적으로 만들 수 있죠. DOM 자체는 빠르지만 브라우저에서 DOM 에 변화가 일어나면 CSS 를 연산하고,.. 이전 1 다음
