리액트란?
-
자바스크립트 파일에 HTML 같은 코드를 섞어서 넣는것 => JSX 가 필요.
-
선언형으로 작성, 반면 자바스크립트는 명령형으로 작성
- js 에서 import/export 를 사용하려면 tyoe="module" 을 추가해야함, but 리액트는 필요없어.
- 변수 or 함수에 export 하면 from,import 키워드로 다른 폴더에서 사용가능하다.
화살표 함수
// 기존 코드
const greet = function(name) {
return 'Hello ' + name;
};
// 화살표 코드
const greet = name => 'Hello ' + name;
1) 매개변수 목록 괄호 생략하기
정확히 하나의 매개변수만 사용하는 경우, 묶는 괄호를 생략할 수 있습니다.
(userName) => { ... }
가 아니라
userName => { ... }
라고 쓸 수 있습니다.
함수에 매개변수가 없는 경우 or 둘 이상의 매개변수에는, 괄호를 생략해서는 안 됩니다.
() => { ... } 라고 써야 옳습니다..
userName, userAge => { ... } 라고 쓰면 안 됩니다.
(userName, userAge) => { ... } 라고 써야 합니다.2) 함수 본문 중괄호 생략하기
화살표 함수에 반환문 외에 다른 로직이 없는 경우, return키워드와 중괄호를 생략할 수 있습니다.
//기존
number => { return number * 3;}
// 화살표
number => number * 3;아래와 같이 오류가 생깁니다.
number => return number * 3; // 이 경우 retrun 키워드는 생략되어야 하므로, 오류가 생깁니다.
number => if (number === 2) { return 5 }; // 이 경우 if 문은 반환될 수 없으므로 오류가 생깁니다. 3) 특수한 경우: 객체 반환하는 경우
const hobbies = ["Sports", "Cooking", "Reading"];
const editedHobbies = hobbies.map((item) => ({ text: item }));
console.log(editedHobbies);- 객체와 중괄호를 추가 괄호로 감싸면, 자바스크립트는 중괄호가 함수 본문을 정의하는 것이 아니라 객체를 생성하기 위한 것임을 이해합니다.
디스트럭처링 구문
const { name: userName, age } = {
name: "Max",
age: 34,
};
console.log(userName);
console.log(age);
//기존
function storeOrder(order) {
localStorage.setItem('id', order.id);
localStorage.setItem('currency', order.currency);
}
// 디스트럭처링
function storeOrder({id, currency}) {
localStorage.setItem('id', id);
localStorage.setItem('currency', currency);전개(확산) 연산자 '...'
1. 배열 및 객체 확장
//배열
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combinedArr = [...arr1, ...arr2];
// combinedArr is [1, 2, 3, 4, 5, 6]
//객체
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const combinedObj = { ...obj1, ...obj2 };
// combinedObj is { a: 1, b: 2, c: 3, d: 4 }
2.함수 인수로 전달
function sum(x, y, z) {
return x + y + z;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers));
// Output: 6
3. 객체 및 배열 복사
//배열
const original = [1, 2, 3];
const copy = [...original];
//객체
const obj = { name: 'John', age: 30 };
const copyObj = { ...obj };
4. 문자열을 배열로 변환
const str = "Hello";
const charArray = [...str];
// charArray is ['H', 'e', 'l', 'l', 'o']
리액트 빌드
리액트 빌드
- 리액트 앱을 빌드한다 = 컴포넌트를 빌드 = JSX 코드를 반환.
React + Vite 컴포넌트 설명
index.html
- 기본 HTML 파일입니다. Vite는 여기에 구축된 JavaScript를 삽입합니다. 웹 애플리케이션의 진입점입니다.
main.jsx(또는 main.js)
- React 앱이 초기화되는 기본 JavaScript 파일입니다. 루트 React 구성 요소(App.jsx)를 가져와 렌더링합니다.
App.jsx
- 루트 React 구성 요소입니다. 대부분의 앱 UI는 여기에서 개발되거나 App.jsx에서 가져온 구성 요소에서 개발됩니다.
vite.config.js
- Vite 구성 파일입니다. 여기에서 빌드 프로세스, 플러그인 및 기타 설정을 사용자 정의할 수 있습니다.
package.json
- 이 파일에는 종속성 및 스크립트와 같은 프로젝트에 대한 메타데이터가 포함되어 있습니다. 이를 관리하려면 npm 또는 yarn 명령을 사용하세요.
node_modules/
- 이 폴더에는 프로젝트의 모든 패키지와 종속성이 포함되어 있습니다. 패키지 관리자(npm 또는 yarn)에 의해 생성되고 관리됩니다.
리액트 제약사항
컴포넌트의 재활용
- 상위 컴포넌트로 감싸줘야한다.
- 반환 요소인 최상위 컴포넌트는 단 하나여야한다.
self closing 태그
- 아무 컨텐츠가 없는 요소라면 self closing 으로 처리한다.
function App() {
return (
<main>
<Post />
<Post />
<Post />
<Post />
</main>
);
}컴포넌트에 속성 추가하기
Props
- 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 방법
- 여러 속성을 담은 객체를 함수의 인자 값으로 전달한다
Props 전달 예시 코드
// 상위 구성요소
import React from 'react';
import ChildComponent from './ChildComponent';
function ParentComponent() {
return (
<div>
<h1>This is the Parent Component</h1>
<ChildComponent message="Hello from Parent!" />
</div>
);
}
export default ParentComponent;
// 하위 구성요소
import React from 'react';
function ChildComponent(props) {
return (
<div>
<h2>This is the Child Component</h2>
<p>{props.message}</p>
</div>
);
}
export default ChildComponent;
- ChildComponent는 props를 인수로 받고 message prop을 표시합니다.
CSS 모듈
- CSS 파일에 정의하고, HTML 이나 JSX 에서 활용하는 클래스 이름이 알아서 자동으로 고유한 클래스 이름으로 변환되어 이름 충돌을 막아줌.
상태
-
상위 요소에서 구성 요소로 전달되고 구성 요소 내에서 변경할 수 없는 props와 달리,
상태는 로컬이며 구성 요소 내에 캡슐화되어 있습니다. -
외부에서는 액세스하거나 수정할 수 없습니다.
-
상태 업데이트는 비동기식입니다.
-
React는 성능상의 이유로 상태 업데이트를 일괄 처리하므로 'setState' 또는 'setCount'가 호출된 후 상태가 즉시 변경되지 않을 수 있습니다.
-
상태가 변경되면 구성요소가 새 상태를 반영하기 위해 다시 렌더링됩니다.
-
웹사이트는 어떤 상태에 있을 수 있는데, 그 상태라는게 여러개 있을 수 있다는 것.
-
이벤트 없이 상태를 이용할 수 있긴 하지만, 상태를 변경할때는 주로 어떤 이벤트가 발생했을 때. ex) 버튼 클릭
사용 방법
- 함수를 만들고
- on 으로 시작하는 속성을 추가하고
- 실행해야 하는 함수를 하나의 값으로 속성에 지정
멘토링 QnA
Q. React에서 컴포넌트를 스타일링 하는 여러가지 방법들에는 CSS모듈, styled-components, emotion, 기타 프레임워크(부트스트랩, tailwind, sass)등이 있다고 알고 있습니다. 각각의 장단점이 있겠지만, 유지보수나 클린코드 면에서 멘토님의 취향을 반영한 의견이 궁금합니다!
-
컴포넌트를 스타일링 하는 방식에서 클린코드가 되지는 않아. CSS 의 본질 상 노가다 성이기 때문에.
-
대신 다른 자바스크립트를 깔끔하게 만드는거에 집중하는편.
Q. 최근에 교육하면서 장시간 노트북 모니터로 인강을 보고 코드를 치다보니 너무 눈이 너무 피로한데, 멘토님 께서는 이러한 부분에 있어서 어떻게 대처하고 오랫동안 업무를 하시는지 궁금합니다!
-
고정석인 경우는 나뭇잎 가림막을 회사에서 신청해서 설치하는 사람이 있음. 좀 더 조명 밝기가 조절되어있는 테이블로 가서 한다거나
-
세팅이나 책상을 이동하는편. 한자리에 있으면 더 피로해져.
-
한시간 법칙의 이유도 눈을 쉬기하기 위함임. 그 때 눈의 피로를 풀어주는편. 눈을 감고 명상을 한다. 가볍게 눈을 감고 지금 겪고 있는 이슈를 생각해.
-
한시간에 5-10분만 풀어줘도 되게 좋아. 허리 건강이나 이런걸 위해서라도 물을 자주 마셔서, 잠깐씩 계속 화장실을 갔다오는편! => 모니터를 안보게되니까
-
점심먹고 수면실에서 30분 정도만 자도 피로가 많이 풀리는편! 만약에 야근을 하고 있을때도 명상을 하거나, 쪽잠을 자면서 쉬는편.
Q. 프레임워크와 라이브러리의 차이에 대한 질문입니다! 제가 기존에 공부한 바로는, 프로그램의 실행흐름을 개발자가 제어하면 라이브러리이고 그렇지 않으면 프레임워크라고 이해하고 있었는데요. 조금 더 명확하게 분류할 수 있는 기준이 있을까요??
-
프레임워크는 어떤 어플리케이션의 큰 틀을 다 제공하는것. 라이브러리는 단순한 개별 기능을 제공하는 것.
-
라이브러리 수십개 및 백여개의 집합이 프레임워크가 되는것. 프레임워크는 어떠한 목적을 빠르게 달성하는것이 목표.
퀄리티가 좋은 블로그 설명
hudi
RSS 에 블로그가 노출.
-
요새는 잘 안해보는 재밌는 문제들에 대해서 다룸.
-
ex) SpringBoot Graceful Shutdown 에 대한 개념
-
JDBC 라이브러리 구현하기 (로우레벨에 접근하는 과정을 조금씩 섞어줌)
-
문제를 소개하고, 이를 해소하는 과정을 단락을 나눠서 잘 풀었음.
Yun Blog
https://cheese10yun.github.io/
-
접근을 실제 성능을 측정하는데 관심이 많음.
-
어떠한 이론을 증명하고 확인하는.
-
N+1 이 발생했을 때 어떤 성능적 리스크가 있는가
-
퀄리티 있는 글이 뜨문뜨문 있는게 훨 좋은 접근.
-
성능 측정 및 분석을 가지고 내가 사용하는 패키지, DB, 비동기 구조에 대한 이해도가 높아졌어요 등등 을 이야기 하는게 매우 좋다!
velopert
- 벨로그를 만든 창시자.
- 대중적으로 만든 블로그를 창시한 걸 다 기록해놓음.
