React fundamentals

Resource : https://github.com/john-smilga/react-course-v3

JSX Rules

• 컴포넌트는 무조건 하나의 element만 반환해야 한다
  • div와 같이 semantics section/article 쓰던가
  • 아니면 이게 싫으면 React.Fragment 쓰면 된다
• property 이름은 camelCase
• class 대신 className <div className='envy'></div>
• 모든 element는 닫아라 <img />

function Greeting() {
  return (
    <React.Fragment>
      <div>
        <h2>My First component</h2>
      </div>
      <h2>This is amazing</h2>
    </React.Fragment>
  );
}

// or

function Greeting() {
  return (
    <div>
      <div>
        <h2>My First component</h2>
      </div>
      <h2>This is amazing</h2>
    </div>
  );
}

Nest component

• 컴포넌트 재사용
• 컴포넌트를 다른 곳에서 따로 선언하고, 선언한 컴포넌트를 다른 컴포넌트 안에 넣는(nesting) 것을 말함

CSS

• 컴포넌트 있는 파일에서 css파일을 import하면 된다
• import './index.css';

이미지 로딩하는 방법

• 외부 이미지 : url
• 내부 이미지
  • public 폴더 : 성능 느림(no optimization)
  • src 폴더 : 성능 더 빠름(optimized)

JSX

• JSX에서 {} 는 자바스크립트를 쓴다는 말

  const author = `Keila Shaheen`;
  const Book = () => {
  const title = `The Shadow Work Journal 2nd Edition`;
  return (
    <article className='book'>
      <img
        src='https://images-na.ssl-images-amazon.com/images/I/61GhbGDD6QL._AC_UL900_SR900,600_.jpg'
        alt='The interesting book'
      ></img>
      <h2>{title}</h2>
      <h4>{author.toUpperCase()}</h4>
      <p>{6 + 6}</p>
    </article>
  );
  };

Props

• Props을 활용하려면 파라미터에 props를 넣어줘야 한다

import React from 'react';
import ReactDOM from 'react-dom/client';

import './index.css';

const author = `Keila Shaheen`;
const img =
  'https://images-na.ssl-images-amazon.com/images/I/61GhbGDD6QL._AC_UL900_SR900,600_.jpg';
const alt = 'The interesting book';
const title = `The Shadow Work Journal 2nd Edition`;

function BookList() {
  return (
    <section className='booklist'>
      <Book author={author} title={title} img={img} alt={alt} />
      <Book author={author} title={title} img={img} alt={alt} />
      <Book author={author} title={title} img={img} alt={alt} />
    </section>
  );
}

const Book = (props) => {
  // 데이터를 props를 통해서 받아오면 내부에서 사용할 수 있다
  return (
    <article className='book'>
      <img src={props.img} alt={props.alt}></img>
      <h2>{props.title}</h2>
      <h4>{props.author.toUpperCase()}</h4>
    </article>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<BookList />);

Props Setup more dynamically

• first get or create object

Multiple approach - access props

• 어떤 식으로 props를 쪼개서 사용할 지는 자기 취향

• deconstructuring으로 컴포넌트 안에서 프로퍼티를 짧게 할 수도 있다.

  const Book = (props) => {
  // 데이터를 props를 통해서 받아오면 내부에서 사용할 수 있다
  
  const { img, title, author, alt } = props;
  return (
    <article className='book'>
      <img src={img} alt={alt}></img>
      <h2>{title}</h2>
      <h4>{author.toUpperCase()}</h4>
    </article>
  );
  };

• 객체분해를 아예 파라미터 안에서 해서 더 줄일 수도 있다.

  const Book = ({ img, title, author, alt }) => {
  // 데이터를 props를 통해서 받아오면 내부에서 사용할 수 있다
  return (
    <article className='book'>
      <img src={img} alt={alt}></img>
      <h2>{title}</h2>
      <h4>{author.toUpperCase()}</h4>
    </article>
  );
  };

Children Prop

• 특정 컴포넌트에만 어떤 엘리먼트를 적용하고 싶을 때 쓸 수 있다
• 단 코드 fragile하므로 공식 문서에서는 잘 쓰지 말라고 한다

Form submit

• type type='submit' 해야지 버튼은 submit 기능을 가질 수 있다. 버튼 자체는 그 기능이 없음

useEffect

useEffect란

• React에서 제공하는 여러 Hook 중 하나
• useEffect는 컴포넌트 외부에서 일어나는 일을 다루는 기술이다.
• 예, 구독, data fetching, DOM 바로 업데이트하기, 이벤트 리스너, 타이머 등

useEffect 사용하는 이유?

useEffect를 조건문 안에 쓰지마세요. 작동 안됨

JSX에서 short circuit가 유용한 이유

• JSX에 if문을 써서 조건에 따른 결과 값을 달리하기 어렵기 때문