React를 시작하기 전에 간단하게 공부 및 정리

컴포넌트 기반

• 컴포넌트 : 리액트로 만들어진 앱을 이루는 최소환의 단위
  컴포넌트 로직은 템플릿이 아닌 JavaScript로 작성된다.
  데이터(props)를 입력받아 View(state)상태에 따라 DOM Node를 출력하는 함수.
  컴포넌트 이름은 항상 대문자로 시작하도록 한다(리액트는 소문자로 시작하는 컴포넌트를 DOM 태그로 취급하기 때문
  UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 코딩한다

• 함수형 컴포넌트 : 가장 간단하게 컴포넌트를 정의하는 방법으로 자바스크립트 함수를 작성하는 것
  클래스형 컴포넌트 : 컴포넌트 구성요소, 리액트 생명주기를 모두 포함.
  프로퍼티, state, 생명주기 함수가 필요한 구조의 컴포넌트를 만들때 사용

• 컴포넌트 주도 개발(CDD) : 컴포넌트를 모듈 단위로 개발하여 사용자 인터페이스(UI)구축에 도달하는 개발 및 설계 방법론. 기본적인 컴포넌트 단위부터 시작해서 UI뷰를 구성하기 위해 점진적으로 결합해가는 상향적 성향을 띈다.
  컴포넌트-컨테이너(2개 이상 컨포넌트 조합)-페이지(2개 이상 컨테이너 조합)

• CDD 장점

  • 1. 품질(Quality) : 독립적으로 컴포넌트를 분리하여 관련 상태를 정의하여 UI가 다양한 시나리오에서 작동하는지 확인 가능
  • 2. 내구성(Durability) : 컴포넌트 수준에서 테스트하여 세부 사항까지 버그를 정확하게 찾아낼 수 있다. 테스트보다 작업량이 적다.
  • 3. 속도(Speed) : 컴포넌트 라이브러리 또는 디자인 시스템의 컴포넌트를 재사용하여 UI를 보다 빠르게 조립할 수 있다.
  • 4. 효율성(Effixiency) : UI를 개별 컴포넌트로 분해한 다음 서로 다른 팀 구성원 간에 공유하여 개발 및 디자인을 병렬처리한다.

---

• 선언형 뷰
  • 선언형 : 무엇(What)을 중요시 여겨서 제어의 흐름보다는 원하는 목적을 중요시 여기는 형태.
    -명령형 : 어떻게(How)를 중요시 여겨서 프로그램의 제어의 흐름과 같은 방법을 제시하고 목표를 명시하지 않는 형태

• JSX : JavaScript에 XML을 추가한확장 문법으로 리액트로 프로젝트를 개발할 때 사용되는 문법이기 때문에 공식적인 JS문법은 아니다.
  JSX는 하나의 파일에 JS와 HTML을 동시에 작성하기 떄문에 편리하다.
  JS에서 HTML을 작성하듯이 하기 때문에 가독성이 높고 작성하기에도 편리하다.

• JSX문법

  • 1 . 반드시 부모 요소 하나가 감싸는 형태여야 한다.
    Virtual DOM에서 컴포넌트 변화를 감지할 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문

  • 2. 자바스크립트 표현식
       - JSX 안에서도 JS 표현식을 사용할 수 있다. JS표현식을 작성하려면 JSX 내부에서 코드를 {}로 감싸주면 된다.
  • 3. If(for) 대신 삼항 연산자(조건부 연산자) 사용
       if문과 for문은 JS 표현식이 아니기 때문에 JSX 내부 JS 표현식에서는 사용할 수 없다.
       조건부에 따라ㅣ다른 렌더링 시 JSX 주변 코드에서 if문을 사용하거나 {}안에서 삼항연산자를 사용한다.
  • 4. React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용한다.
       JSX 에서 JS 문법을 쓰려면 {}를 써야하기 때문에, 스타일을 적용할 때에도 객체 형태로 넣어주어야 한다.( 카멜 표기법으로 작성해야 한다.
  • 5. JSX 내에서 주석 사용방법
       {…}와 같은 형식을 사용한다.

• Hooks : 리액트에서 기존에 사용하던 클래스를 이용한 코드를 작성할 필요 없이 state와 여러 리액트 기능을 사용할 수 있도록 만든 라이브러리

리액트에서 기본적으로 지원하는 Hooks
1. useState : 컴포넌트의 state를 관리할 수 있다. 상태에 따라, 다른 화면 출력
2. useEffect : 렌더링 이후에 실행할 코드를 만들수 있다. 어떤 변수가 변경될 때마다(의존성), 특정기능이 작동하도록 할 수 있다.
3. useContext : 부모컴포넌트와 자식컴포넌트 간의 변수와 함수를 전역적으로 정의할 수 있다.
4. useReducer : state업데이트 로직을 reducer 함수에 따로 분리할 수 있다.
5. useRef : 컴포넌트나 HTML 요소를 레퍼런스로 관리할 수 있다.
6. forwardRef : useRef로 만든 레퍼런스를 상위 컴포넌트로 전달할 수 있다.
7. useImperativeHandle : useRef로 만든 레퍼런스의 상태에 따라 실행할 함수를 정의할 수 있다.
8. useMemo, useCallback : 의존성 배열에 적힌 값이 변할 때만 값, 함수를 다시 정의할 수 있다.(재랜더링시 정의 안함)
9. useLayoutEffect : 모든 DOM 변경 후 브라우저가 화면을 그리기(Render)전에 실행되는 기능을 정할 수 있다.
10. useDebugValue : 사용자 정의 Hook의 디버깅을 도와준다.

---

• State & Props

State : 리액트에서 사용자의 반응에 따라 화면을 바꿔주기 위해 사용되는 트리거역할을 하는 변수. 리액트가 state를 감시하고 바뀐 정보에 따른 화면을 표시해준다

Props : 속성을 나타내는 데이터

1. 화살표함수 : 함수 표현식보다 단순하고 간결하게 함수를 만들 수 있음. 익명함수와 암시적 반환을 가능하게 해주기 떄문에 많이 사용

기본적인 방법1. 함수 선언식

function sayHello () {
	return "hello world!"
}

기본적인 방법2. 함수 표현식

const sayHellow = function(){
	return "hello world"
}

(작동방식에 있어 두 방식에 차이는 없지만 함수 선언식은 호이스팅에 영향을 받고 함수 표현식은 호이스팅에 영향을 받지 않는다.)

• 호이스팅이란 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것
  
  
  

화살표함수 방식 1

const sayHello = () => {
  // < --- 함수 로직 --- >
	return "hello world!"
}

화살표함수 방식 2(암시적 반환)

// return 을 생략하는 방식.
const sayHello = () => "hello world!"

화살표함수 방식3 익명함수

// 예시 1 - 기본적인 함수 표현 방식
const sayHelloOnClick = () => {
	console.log('hello friend')
}
<App onClick={sayHelloOnClick} />

// ❗️ 예시 1 - 익명 함수

<App onClick={() => console.log('hello friend')} />

// 예시 2 - 기본적인 함수 표현 방식

const ReturnItem = (item) => {
	return <div>{item}</div>
}
{array.map(ReturnItem)}

// ❗️ 예시 2 - 익명 함수

{array.map((item)=> <div>{item}</div>))}

2. 객체와 배열 구조분해 할당

객체 구조분해 할당 을 사용하지 않을 때

const user = {name: "손석구", age: 10};
console.log(user.name) // 손석구
console.log(user.age) // 10

객체 구조분해 할당을 사용했을 때

const { name, age } = user

console.log(name) // 손석구
console.log(age) // 10 

배열 구조분해 할당을 사용하지 않을 때

const games = ['배틀그라운드', '리그오브레전드'];

console.log(game[0]) // 배틀그라운드
console.log(game[1]) // 리그오브레전드

배열 구조분해 할당을 사용할 때

// 구조분해 할당
const [battleGround, Lol] = games;

console.log(battleGround); // 배틀그라운드
console.log(Lol); // 리그오브레전드

3. 함수 인자에서 구조분해 할당

함수 내 구조분해 할당을 사용하지 않을 때

// user가 객체일 때
const getUserName = (user) => {
	return user.name
}

// user가 배열일 때
const getUserName = (user) => {
	return user[0]
}

함수 내 구조분해 할당을 사용할 때

// 객체일 때
const getUserName = ({name, age}) => {
	return name;
};

// 배열일 때
const getUserName = ([name, age]) => {
	return name
};

4. Spread operator (전개 구문)

전개구문 : 기존에 있는 객체나 배열의 내용을 그대로 가져오거나 새로운 값을 덧붙여서 새로운 객체나 배열을 생성할 수 있다. 기존의 데이터(객체나 배열)에는 전혀 영향을 주지 않고 새로운 것을 만든다.

const box = {size: "big", color: "red"};

const newBox = { ...box}; // {size: "big", color: "red"}
const newBlueBox = {...box, color: "blue" }; // {size: "big", color: "blue"}

5. rest operator(나머지 매개변수 구문)
나머지 매개변수 구문 : 객체나 배열에서 구조 분해 할당을 했을 때 나머지 정보를 묶어서 표현할 수도 있다. rest라는 키워드를 꼭 사용하지 않아도 되고 편한 키워드를 사용해도 된다

const user ={id: 1, name: "둘리", age: 10, location: "seoul"};

// rest 사용
const {name, ...rest} = user;

// 콘솔에 rest를 찍어보면, 구조분해 할당을 한 정보를 제외한 나머지 값을 보여줍니다. 
console.log(rest) // {id: 1, age: 10, location: "seoul"}