앞부분 부근에서 헷갈리기 쉬운 동음이의어

개시하다

앞부분 개발에서는 상식적으로 날아다니는 단어지만 두 가지 의미가 혼동되기 쉽다.
대충 말하면 CSS와 JavaScript의 차이점입니다.나는 이것들은 대부분 말하는 상하문에 근거하여 이해한 것이라고 생각하지만, 때로는 한순간에 혼동되기도 한다.

컨테이너(컨테이너, 컨테이너)

그 1

컨텐트가 포함된 가로 폭을 스타일 이름을 정의하는 데 사용합니다.스펀지에 대응하는 경우도 많다.

.container {
  /* ... */
}

function Container({ children }) {
  return <div className="container">{children}</div>;
}

두 번째

React 구성 요소

Container Component...상태가 있어 논리를 책임진다.

Presentational Component...props로 상태를 수락하고 UI의view를 담당합니다
이런 층별 디자인 기법.원래는 레드ux의 유래였지만, 최근에는 그뿐만이 아니라 사용될 수도 있다

// Container
function ProductList() {
  // data fetch
  const { products } = useProducts();

  return <ProductTable products={products} />;
}

// Presentational
function ProductTable({ products }) {
  return <div className="ProductTable">{/* ... */}</div>;
}

클래스

그 1

HTML의 class 속성입니다.대부분 CSS에서 사용됩니다.

<div class="style1 style2">Lorem, ipsum dolor.</div>

두 번째

OOP반.

class Example {
  constructor() {
    // ...
  }

  public foo() {
    // ...
  }
}

Selector(선택기, 선택기)

그 1

CSS에 적용되는 요소입니다.이거.や.hoge대신하다.

.hoge {
  color: red;
}

#fuga .h1 {
  color: blue;
}

두 번째

React의 상태 관리에서 상태에 따라 계산할 수 있는 값을 가리킨다.Redux에서 파생되었습니다.

// countに対するselector (極端に単純な例)
const selectCount10x = (count: number) => count * 10;

function Counter() {
  const [count, setCount] = useState(0);

  const count10x = selectCount10x(count);

  return <div>count x 10 = {count10x}</div>;
}