Web/React

[React] Component에 대한 이해

Component란? 앱을 이루는 최소한의 단위 - UI는 재사용 가능한 개별적인 여러 조각으로 나눔(각 조각을 개별적으로 나누어 코딩) - props 혹은 state 값을 입력받아 DOM 노드 생성(* DOM: 브라우저가 html을 인식하는 방식을 계층화해 트리구조로 만든 모델) - 이름은 항상 대문자(소문자로 시작하는 컴포넌트는 DOM 태그로 취급) Component 선언 방식 - 클래스형 과 함수형 → 리액트 메뉴얼에서 권고하는 방식 : 함수형 + Hooks 모듈(분리한 컴포넌트)를 내보내기(export) 모듈(분리한 컴포넌트)를 불러오기(import) 반복되는 형태의 코드 → Map() 함수로 관리 Map() : 파라미터로 전달된 함수로 배열 내 각 요소를 원하는 규칙에 따라 변환해 그 결과로 새..

[React] JSX 다루기(2)

JSX Styling 1) inline Styling style 속성에 들어가는 값은 객체형태 css 속성이름이 camelCase로 작성되어 있음 style 값에 들어갈 객체 미리 선언 가능 - Hello.jsx import React from "react"; //React 컴포넌트라서 /* Hello라는 함수형 컴포넌트 생성 */ function Hello(){ const PracticeStyle = { marginTop: '10px', backgroundColor:'blue' }; return ( Hello World! Hello World! Hello World! ); } export default Hello; 2) CSS 파일 작성 기존의 css 파일 작성하는 방식 사용 가능 - Hello.css..

[React] JSX 다루기(1)

JSX = Javascript + XML Javascript 에서 xml과 같은 문법을 사용할 수 있도록 확장된 언어 JSX 란? - JSX(JavaScript XML)는 Javascript에 XML을 추가하여 확장한 문법이다. - JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다. - 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. JSX와 Babel - JSX는 js를 기반으로 하고 있지만, js와 완전히 같지는 않다 - 실행을 위해 js로의 변환이 필요 → Babel이 해줌 JSX를 이용한 코드 : 결과 선언적(선언형) JS를 이용한 코드 : 어떻게 만들지 방법을 명령(명령형) 따라서, React는 선언적 프로그래밍을 함 JS..

[React] 프로젝트 맛보기 - Hello World!

개발 환경 MacbookAir M1 VSCode node js yarn (package Manager) 프로젝트 생성 - 프로젝트 이름 : react-study yarn create react-app react-study - 생성되는 폴더 소개 node_modules: 모듈들을 저장하는 폴더 public: 정적 파일들이 담겨있음 ex) index.html src: react의 큰 흐름인 index.js, App.js 등의 파일이 존재 App.js 에서 html로 react component를 생성 → 생성한 component를 index.js 에서 불러옴 → index.html의 document.getElementById("root") 로 접근하여 코드를 넣는 것 index.js : 만들어진 컴포넌트를 ..

[React] 환경설정

1. VSCode 설치 2. Setting Node.js 3. Setting Package Manager NPM(node package manager) javascript 라이브러리들을 설치하고 버전 관리 project 폴더와 node modules 라는 폴더에 라이브러리들 저장 package.json 이라는 파일에 라이브러리들의 정보를 담아 저장 [문제] 개발을 하다보면 node modules 가 매우 커짐 → 프로젝트를 주고 받을 때 라이브러리까지 주고받기에는 너무 크다 [해결] package.json 파일만 주고 받으면 몇 버전의 무슨 라이브러리를 썼는지 알 수 있어 npm을 통해 각자 다운 받아 프로젝트 환경을 동일하게 한다. Yarn facebook에서 npm의 단점을 보완한 라이브러리 관리 도..

[React] React란?

유저 인터페이스를 만들기 위한 자바스크립트 라이브러리 UI / UX UX : 사용자가 서비스를 이용하며 겪는 모든 경험 UI : 사용자가 경험을 할 때, 직접 상호작용하는 부분 프레임워크와 라이브러리 차이 프레임워크 : 뼈대, 골조, 소프트웨어의 설계와 구현을 위한 상호 협력하는 클래스와 인터페이스의 집합 라이브러리 : 소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임 → 프레임워크는 전체 설계와 구현을 이끄는 일종의 틀(도면) → 라이브러리는 불러와 사용되는 도구(망치) React는? 온전한 하나의 어플리케이션을 만들어내기 위해 부족한 기능들은 다른 라이브러리들을 필요로하므로 (완전한) 프레임워크가 될 수 없음 많이 사용되는 라이브러리들이 모여 하나의 프레임워크 같은 ‘리액트 생태..