React

JSX 와 IF문 조합

• 조건부 렌더릴ㅇ의 경우 상황에 따라서 해당 컴포넌트를 보여줄지 말지 여부를 결정
• 3항연산자 또는 && 연사자를 더 많이쓴다. (코드가 더 짧고, 직관적)

3항연산자

import React from 'react'

export default function Where() {
  const where = prompt('어디로 갈까요? left/ right')

  return (
    <>
      {where === 'left' ? (<h1>여기는 왼쪽입니다</h1>) : (<h1>여기는 오른쪽입니다</h1>)} 
    </>
  )

React에서 If문 사용

• prompt 함수: 브라우저상에서 값을 입력받음
• where라는 변수에 문자열로 담긴다.

import React from 'react'

export default function Where() {
  const where = prompt('어디로 갈까요? left/ right')

  if (where === 'left') {
    return (
      <> 
        <h1>여기는 왼쪽입니다.</h1>
      </>
    )
  } else {
    return (
      <>
        <h1>여기는 오른쪽입니다.</h1>
      </>
    )
  }

}

• 조건식 자체가 복잡하거나, return값의 양이 많고, 조건에 따른 결과 리턴이 완전히 달라지는 경우에는 if문을 사용하는 편이 보기에도, 처리하기에도 더 편하다.

Public 폴더 사용

• React 폴더구조
• components 기준 상대경로
  

퍼블릭폴더로 접근하기

• 일종의 보안상의 이유로 기존 컴포넌트에서 다른 폴더에 접근을 하려고 해도 src 폴더 밖으로 나가는 것은 지원하지 않는다.
• 상대경로를 이용해서 src 폴더 이상으로 가서 다른 폴더에 접근하는 방법은 막힌다. 절대경로 또한 막힌다.
• 단, 한단계 상위 폴더로 접근하는 상대경로는 먹힌다.
• 해결방법: 그럼, 백엔드 처럼 static 설정~!

  Npx create-react-app 을 통해 만들어진 리액트 앱의 경우는 public 폴더가 자동으로 static 처리가 된다.
  따라서, 어느 위치에서건 / 를 써서 접근하면 public 폴더가 호출된다.

• 사진의 주소 값을 /images/dog.jpg로 지정

export default function Image() {
  return (
    <>
      <img src="/images/dog.jpg"alt="강아지" />
    </>
  )
}

src 폴더 내부 참조는 문제 없다.

Component Composition 컴포넌트 합성

기존 JS 에서의 Class extends 상속

• class의 상속 확장
  (똑같은 형태의 class를 상속(extends)을 받고 왕관기능추가)
• 원본 클래스를 변경하면, 상속받은 클래스는 원본 클래스의 변경부분이 같이 변경된다.

1. 원본 클래스 존재
2. 원본 클래스를 똑같은 형태의 클래스 1개에 상속
3. 상속 클래스에 왕관기능 추가 (원본 클래스는 변화 없음)
4. 원본 클래스에 귀걸이 추가 (상속 클래스도 귀걸이가 같이 추가된다.)
   

React의 Composition(합성)

• 리액트에서는 컴포넌트 단위로만 구성을 하면 되기 때문에 Class 의 확장과 같은 복잡한 개념(생성자, super 등등) 보다는 블록 조립에 가까운 합성의 개념을 도입 했습니다
• 기존의 것이 필요하면 import 로 불러와서 바로 사용하고, 필요한 기능을 추가한 뒤 새로이 명명하는 방법으로 확장과 비슷한 개념을 더 단순화 하여 사용하고 있습니다
• 그리고 각각의 커스터마이징은 Props 를 통해 간단히 구현 가능합니다

specialization 특수화

합성 새로운 컴포넌트를 불러와서 새로운
컴포넌트에 자식요소를 전달해서 새로운 것을 그려주는 역할을 한다.

만들어진 컴포넌트는 import로 불러온 다음 사용