6주 4일차 - 리액트 기초

6주 4일차 - 리액트 기초

1. 리뷰

1.1 좋았던 점

• 늦게 잤음에도 6시에 일어나서 다시 잠들지 않고 공부를 시작한 것.
• 딥다이브 스터디를 포기하지 않은 것.

1.2 아쉬웠던 점

• 수면시간 부족으로 집중력 저하.

1.3 notes

m1맥북에어 램16기가 ssd512기가 질렀다. 목숨걸고 공부해야 할 이유가 하나 더 늘었다. 웃프다 ㅎ하하
내일만 버티면 3일이나 쉰다. 어차피 공부하고 있겠지만, 지금 잠깐이나마 숨 고를 수 있을 때 프로젝트 전 까지 공부해야 할 것들 제대로 분량 쪼개고 미리미리 준비해두어야겠다. 부족한 공부를 때우려고 늦게 자는 것보다 일찍 일어나서 깨어있을 때 최대한 시간을 효율적으로 쓰는게 낫다.

2. 배운 것

• 딥다이브 12장 - 함수
• 리액트 jsx문법, 컴포넌트 생성

3. 내용 정리

• 리액트의 특징
  1. 선언형: 코드를 자세히 분석하지 않고도 코드의 의도를 명확히 보이게 작성 가능.
     하나의 파일에서 html/css/js 모두를 jsx문법으로 작성 가능하므로 하나의 파일만 보고도 전체적인 구현 모습을 쉽게 떠올릴 수 있다.
  2. 컴포넌트 기반: 독립적으로 존재하고 재사용 가능한 컴포넌트 단위로 개발하여 각각의 컴포넌트의 기능 개발에 집중하여 구현할 수 있다. 즉 독립적이고 재사용성이 좋기 때문에 유닛 테스트, 유지보수에 용이함.
  3. 범용성: 리액트는 자바스크립트 라이브러리이므로 자바스크립트 프로젝트라면 어디든 쉽게 기존 프로젝트에 연동할 수 있다. (프레임워크는 생태계에 종속되므로 범용성 x)
• 리액트는 라이브러리이다. 하지만 프레임워크인지 라이브러리인지 명확하게 구분지어지진 않는다. 프레임워크처럼 반드시 리액트의 특정 문법들을 준수해야 한다.
• JSX: 자바스크립트의 확장된 문법.(syntax extension to javascript)
• JSX 문법은 자바스크립트의 문법을 기반으로 하지만 브라우저에서 바로 적용시킬 수 없다. babel을 통해 브라우저가 이해할 수 있는 자바스크립트 코드로 반드시 컴파일 시켜야 한다.
  cra를 통해 기본 리액트 앱 템플릿을 생성할 경우 자동으로 바벨 및 기타 환경 설정을 가장 범용적인 세팅으로 적용시켜 생성해준다.
• 바닐라 자바스크립트가 html에서 요소를 생성한 후에 js에서 접근하고 수정하여 다시 html에 반영시키는 번거로운 과정을 거쳤던 것을 리액트에서는 js에서 html 요소를 만들고 css를 입히고 이벤트를 구현하는 모든 과정을 한번에 가능하도록 하였다.
• 반드시 지켜야 할 JSX 문법
  1. 요소 안에 여러 요소를 넣고자 하는 경우 반드시 최상위 요소가 여는 태그와 닫는 태그로 감싸고 있어야 함.
  2. 요소에 class 부여 시 className=”클래스명” 으로 작성. class 는 자바스크립트 예약어라 사용불가.
  3. 표현식은 중괄호로 감쌀 것. (ex: 변수명)
     boolean 값이나 객체는 사용할 수 없다.
     다만 객체의 경우 html 요소의 속성값에 알맞은 프로퍼티 값일 경우 사용 가능.

// JSX에서 표현식 삽입 시 불린값, 객체는 사용 불가!
// Error: Objects are not valid as a React Child.
// 불린값은 에러는 발생하지 않지만 화면에서 보여지지 않음.

function App() {
  const user = { name: 'Ryan' };
  return (
    <div className="App">
      <h1>This is the title.</h1>
      <span>Hello, {name}!</span> // Unexpected use of 'name'.
    </div>
  );
}

// 객체를 사용하려면 요소의 속성값에 알맞게 프로퍼티 값을 입력.
function App() {

  const google = {
    name: '구글',
    url: 'https://www.google.com',
  };

  return (
    <div className="App">

      <a href={google.url}>{google.name}</a> // dot notation

    </div>
  );
}

1. React 엘리먼트(컴포넌트명)는 반드시 대문자로 시작해야 함. 소문자로 작성 시 일반 html 요소(태그)로 인식한다.
`<Button />` : 리액트 엘리먼트(컴포넌트)로 인식.
`<button />` : html 버튼 태그로 인식.
2. 조건부 렌더링에는 if문 대신 삼항연산자를 사용.
3. 여러개의 html 요소를 표시할 때에는 **map()** 함수를 사용한다. 또한 반드시 **"key" JSX 속성**을 넣어야 한다.
4. 요소의 속성명에 하이픈이 들어갈 경우 카멜케이스로 작성.(backgroundColor)

• 컴포넌트 생성하기
  1. src 폴더 내 component 폴더 생성 후 그 안에서 파일 생성.
  2. 컴포넌트명을 대문자로 시작하여 함수를 정의하여 React 엘리먼트 생성.
     jsx 작성한 내용은 반드시 리턴값으로 들어가야 함. return 맨 앞에 쓰는거 빼먹지 않기.
     export default*function*Hello()*{*return*<p>Hello!</p>; }
  3. 함수 외부에서 export.
     2번 과정과 3번 과정을 한번에 할 수도 있다.
     export default function Hello() { … }
  4. 다른 컴포넌트에서 새로 만든 컴포넌트를 사용하기 위해 import.
     import Hello from './component/Hello'; 로 해도 되나,
     auto import 기능을 활용하는게 더 편하다. (바로 부모 컴포넌트 요소 내에 삽입)
  5. 다른 컴포넌트 내부에서 불러온 컴포넌트를 사용할 위치에 적용시키기.
     안에 들어갈 텍스트 등의 요소가 없다면 self closing tag로 작성.

import './App.css';
import Hello from './component/Hello';
function App() {
  return (
    <div className="App">
      <Hello /> // 여기에 불러옴.
    </div>
  );
}

export default App;

• 모든 컴포넌트는 하나 이상의 요소가 있는 경우 반드시 감싸는 태그가 있어야 한다.
  div로 해도 되고, <> </> 빈 태그로 감싸도 된다.
• css module 불러오는 법: import styles from "css파일경로"
• module css는 반드시 .module.css 로 작성해야 한다.
  관습적으로 컴포넌트명.module.css 로 작성한다.
• 이벤트 처리: 태그 안에 on={함수명} 또는 on={함수 직접 작성}
• 리액트 컴포넌트의 반환값은 표현식이다. 즉 값으로 평가되므로 변수에 할당 가능하다.
  • 따라서 JSX에서 조건문을 삼항연산자로 사용하는 이유도 값으로 평가되는 표현식 이기 때문이다.
• key 값 랜덤으로 주면 절대 안된다.

4. 할 일

• 딥다이브 12장 5 ~ 6절 정리
• 코딩앙마 리액트 강의 props까지. 최소한 state까지는 학습.
• 데일리코딩 가능한 최대한 마지막 문제까지 풀어보기
• 재귀함수 심화문제, 백준 재귀함수 문제풀이
• til정리