React_Study [ Conponents, Props, 조건부렌더링, State ]

2022-10-11 노션페이지
2023-05-11 노션페이지

Components

• React에서 페이지를 구성하는 최소단위
• Component의 이름은 대문자로 시작
• Class Component / Function Component로 나뉨
  • 현재는 Function Component를 대부분 사용
• 특징
  • 컴포넌트끼리 데이터를 주고 받을 땐 Props 사용
  • 컴포넌트 내에서 데이터를 관리할 땐 State
  • 데이터는 부모 → 자식으로만 전달

props

• props.~~~으로 프로퍼티 값을 사용
  • 함수의 파라미터에서 비구조화 할당문법(es6문법)을 사용하면 조금 더 코드를 간결하게 작성

function Hello({ color, name }) {
  return <div style={{ color }}>안녕하세요 {name}</div>
}
// 객체의 key 이름과 같아야 

• React에서 DOM Element의 Attributes
  • camelCase 사용
  • 그러나 ‘data-’ 또는 ‘aria-’로 시작하는 Attribute는 예외
  • HTML의 Attribute와 다른 이름을 가지는 Attribute
    • class → className, for → htmlFor
  • HTML의 Attribute와 다른 동작 방식을 가지는 Attribute
    • checked ( defaultChecked ), value (defaultValue), style
      • 본래 HTML은 기본값을 설정하는 데 사용했지만,
        리액트에선 현재 값을 의미

• defaultProps 로 기본값 설정
  • 컴포넌트에 props 를 지정하지 않았을 때 기본적으로 사용 할 값을 설정

function Hello({ color, name }) {
  return <div style={{ color }}>안녕하세요 {name}</div>
}
Hello.defaultProps = {
  name: '이름없음'
}

• props.children
  • 컴포넌트 태그 사이에 넣은 값을 조회

import React from 'react';
function Wrapper({ children }) {
  const style = {
    border: '2px solid black',
    padding: '16px',
  };
  return (
    <div style={style}>
      {children}
    </div>
  )
}
export default Wrapper;
-------------------------------------------------------
//App.js  
function App() {
  return (
    <Wrapper> // Wrapper 사이에 태그를 넣고 싶을 때
      <Hello name="react" color="red"/>
      <Hello color="pink"/>
    </Wrapper>
  );
}

• props 값 설정을 생략하면 ={true} 로 간주
  이렇게 isSpecial 이름만 넣어주면 isSpecial={true} 와 동일한 의미

조건부 렌더링

• 특정 조건에 따라 다른 결과물을 렌더링

//ex
function App() {
  return (
    <Wrapper>
      <Hello name="react" color="red" isSpecial={true}/>  
     {/* isSpecial 값에 따라 보이는 게 다르게 하고싶음*/}
      <Hello color="pink" />
    </Wrapper>
  )
}
-----------------------------------------------------
function Hello({ color, name, isSpecial }) {
  return (
    <div style={{ color }}>
      { isSpecial ? <b>*</b> : null }
       // 삼항연사자를 통해 반환값을 이용한다.
	  {/* {isSpecial && <b>*</b>} 이 문법도 동일 동작한다. */}
	  {/* &&은 모두 true일 때 뒤에 값을 반환하기 때문이다 */}
      안녕하세요 {name}
    </div>
  );
}

State

• 클래스형컴포넌트와 함수형컴포넌트의 state사용법이 다르다
• 현재 함수형컴포넌트를 주로 사용하기 때문에 함수형컴포넌트에 대해서만 포스팅
• Component내에서 유동적으로 변할 수 있는 값을 저장

  => State값이 변경
  => 재렌더링이 필요한 경우 React가 자동으로 계산
  => 변경된 부분을 렌더링

• 사용방법 (비구조화 할당)
  • const [number, setNumber] = useState(0);
  • [ 값을 조회할 때 사용, 값을 변경할 때 사용 ] = useState(초기값);

참조: 벨로퍼트와 함께하는 모던 리액트, 리액트를 다루는 기술[개정판]