[React] prettier와 eslint

1. prettier - code formatter (탭, 간격, 띄어쓰기, 줄바꿈, 세미콜론, 따옴표... 자동으로) file - 깃허브(원격저장소)에 데이터를 저장할 때[협업용] - 모든 개발자들이 같은 형태의 데이터를 저장하기 위해 설정하는 파일 .prettierrc 내 로컬 환경 vscode의 extension을 활용하여 내가 마음대로 커스텀한 코드 포메터를 사용 2. eslint - lintter의 일종 (화살표함수, 일반함수, console.log를 허용할 것인지, 사용되지 않는 변수가 있다면 error 정의되지 않음 함수가 있다면...) - 여러분들의 코드 문법을 통일화 file - 깃허브(원격저장소)에 데이터를 저장할 때[협업용] - 모든 개발자들이 같은 형태의 데이터를 저장하기 위해 설정..

[React] Project 관련 내용

1. 반복 태그 -> 컴포넌트 - input처럼 반복적인 써야 되는 태그들을 그냥 사용하게 되면 내용이 길어지고 가독성이 떨어진다. - 이럴 때 그 태그들을 컴포넌트로 따로 빼서 import 해주는 식으로 하면 더 간단해지게 된다. - 그리고 그 태그에 관련된 속성들을 props로 전달시켜줘서 속성들도 또한 맞게 사용하면 된다. - 밑에 사진처럼 위치에 따라 만든 컴포넌트에 내용들에 더해서 더 필요할 수도 있고 아닐 수도 있다. - 이럴 때는 삼항연산자를 이용해서 넘어온 props가 있냐 없냐로 나눠서 필요한 태그를 넣어줄지 아니면 그냥 빈값을 넣어줄지 하면 된다. 2. 반복 태그 -> 컴포넌트 - onClick 사용 - 반복적인 태그에서 onClick을 통해서 클릭한 것에 표시를 해야 할 때가 있다. ..

[React] TailwindCSS

1. TailwindCSS - 외부 라이브러리를 통해 보다 쉽고 빠르게 컴포넌트들을 디자인 하는 방법 - 미리 정해진 스타일의 클래스명을 통해 빠르게 디자인이 가능하다. - 아래 사이트에 들어가면 다양한 스타일에 관한 클래스의 정보가 들어있다. - 아래 사이트에서 기능들을 확인할 수 있기에 여기서 기능은 따로 설명하지 않겠다. https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Documentation for the Tailwind CSS framework. tailwindcss.com 2. TailwindCSS를 사용하기 위한 준비 관련 패키지 설치 - VS code에서 사..

[React] SCSS, styled-components

* 가장 기본적인 방법(원시적인 스타일시트 파일을 이용한 방법) CSS - default.css SCSS - default.scss * 리액트에서 제공하는 스타일시트 코딩 방법(비추천) styled-components * 생산성 향상을 위해 외부 라이브러리를 이용한 방법(추천) tailwindcss 기타 등등... * 가장 추천하는 방법 = 외부 라이브러리 + CSS/SCSS를 병행 이용 * SCSS는 SASS의 버전으로 나온 언어로, SASS 기능을 지원하면서 CSS와 거의 같은 문법으로 사용된다는 점에서 많이 사용되고 있다. * SASS보다 SCSS가 뒤에 나왔고 여러가지 문법의 차이가 있지만 SCSS가 더 넓은 범용성과 CSS의 호환성 등의 장점으로 SCSS를 사용하기를 권장하고 있다. * 따라서 ..

[React] CSS, Image, className, 반복 요소 렌더링, list 복사

1. CSS - React에서 CSS를 import를 해줄 때는 import "./default.css" 처럼 해준다. - 그리고 CSS import는 프로젝트 시작점에 한번만 해주면 된다. 2. Image - Image를 쓰기 위해서는 import GAME_1 from "./images/game-1.jpg" 처럼 import를 해주는 방식으로 한다. - 그 다음에 import를 해준 이름으로 처럼 해주면 이미지를 사용할 수 있게 된다. 3. className - React에서 태그에게 class 속성을 줄 때 class로 주지 않고 className으로 줘야 한다. - CSS에서 똑같이 .클래스명 으로 접근할 수 있다. 4. 반복 요소 렌더링 - 화면에 안에 있는 몇가지 내용만 다르고 같은 UI를 반복..

[React] 리액트 훅(React Hooks)

1. 리액트 훅(Hooks) 및 종류 - 리액트가 함수 컴포넌트를 만들며 어떤 값을 유지할 수 있도록 "캐시"를 만들었다. - 이 캐시를 이용하여 상태관리를 할 수 있도록 만든 여러개의 API를 훅(Hooks)라 한다. - 즉, 초창기 함수 컴포넌트에서 상태 관리를 할 수 없었던 것을 리액트 훅을 이용해 클래스 컴포넌트에서의 상태관리가 가능하게 되었다. 종류 설명 useState Hooks에서 state를 관리하기 위한 기술 useEffect Component가 렌더링 되고 화면에 프린트 된 후에 발생 useLayoutEffect Component가 렌더링 되고 화면에 프린트 되기 전에 발생 useMemo 기존에 수행한 연산의 결과 값을 어딘가에 저장해주고 동일한 입력이 들어오면 재활용하는 프로그래밍 기..

[React] 클래스형 VS 함수형 컴포넌트

1. 클래스형 / 함수형 컴포넌트 클래스형 컴포넌트 - 전통적인 방식 - 리액트에서 컴포넌트를 작성할 때 Component를 상속 받아 작성하는 방법 - 즉, 클래스 형식으로 컴포넌트를 작성하는 방법 함수형 컴포넌트 - 버전 16.8부터 Hook 지원 - 자바스크립트 특성인 함수형 개발 방법을 이용하는 컴포넌트를 함수형으로 작성하는 방법 2. 클래스형 / 함수형 컴포넌트 특징 클래스형 컴포넌트 특징 - class 키워드로 시작 - Component를 상속 받음 - render() 함수를 사용해서 JSX를 반환 - props를 조회할 때 this 키워드를 사용 함수형 컴포넌트 특징 - JSX를 return 문을 사용해서 반환 - state를 사용할 수 없음 - 생명주기 함수를 작성할 수 없음 3. 클래스형..

[React] CSR vs SSR / SPA vs MPA / 리액트 라우터(React-Router)

1. CSR vs SSR CSR(Client Side Rendering) - 사용자가 페이지를 그림 => 사용자가 렌더링 부담 - 사용자가 웹 사이트에 접속 -> 서버에게 페이지에 필요한 리소스(code, asset)을 요청 - 페이지가 로드 될 떄 상품에 관한 정보를 백엔드 서버에 달라고 요청 - 사용자는 전달받은 리소스를 js까지 모두 로드한 후 화면에 표현 장점 - 필요한 자바스크립트를 사전에 미리 불러와 초기 렌더 이후의 속도는 빠름 - 특히 사전에 백엔드와 통신하는 부분이 없다면 SSR를 사용할 이유가 없음 단점 - 초기 페이지 로딩이 SSR보다 느림 - 사용자가 페이지를 렌더하는 동안 빈화면을 보게되므로 UX가 좋지 않음 - 사용자에게 렌더링을 부담 -> 사용자의 하드웨어에 의존 SSR(Ser..

[React] 이벤트(Event)와 이벤트 핸들러(Event Handler)

1. 이벤트(Event)와 이벤트 핸들러(Event Handler) 이벤트(Event) - 리액트의 이벤트는 웹 브라우저의 HTML 이벤트와 동일한 기능을 한다. - 또한, HTML 이벤트와 인터페이스가 동일하여 사용법 또한 비슷하다. 이벤트 핸들러(Event Handler) - HTML 또는 자바스크립트에서 이벤트 처리를 위해 사용하는 핸들러와 마찬가지로 리액트에서 이벤트를 사용하기 위해 프로그래밍하는 방법 또는 함수 event 매개변수 - 함수 형태로 값을 전달 할 때 함수 매개변수로 event를 받아서 사용할 수 있다. - event.target은 이벤트를 발생시키는 태그를 뜻한다. - event.target.value는 이벤트를 발생시키는 태그의 value를 뜻한다. - 이벤트 예시 2 참조 2...

[React] props와 state

* 리액트는 컴포넌트로 구성되며, 하나의 컴포넌트는 부모로부터 전달된 props를 바탕으로 DOM을 렌더링하기 위해 element들을 조합하여 render한다. * 또한 컴포넌트는 필요에 따라 값을 내부적으로 변경하기 위해 state를 갖는다. 1. props properties의 줄임말로 상위 컴포넌트(부모)가 하위 컴포넌트(자식)에 값을 전달하기 위한 방법으로 단방향 데이터 흐름 이 프로퍼티는 하위 컴포넌트 즉, 전달 받은 컴포넌트에서 수정이 불가 외부에서 전달되는 값으로 변경이 불가능한 특징을 가짐 2. props입력과 출력 - 자식 컴포넌트를 부르는 부모 컴포넌트에서 속성으로 prop를 입력할 수 있다. - 상위 컴포넌트(부모)에서 하위 컴포넌트(자식)에게 prop을 입력을 했기 때문에 DOM을 ..