react 학습노트 | 2.Component

Component

• 스스로 상태를 관리하는 캡슐화된 코드 조각
• 컴포넌트는 하나의 JSX를 반환하는 함수.

  function App(){  
  return (
    <h1> Hello </h1>
    <h1> World </h1>
   )  
  }

  ReactDom.render(
    document.getElementById('root')  
  )

위 코드에서 App() 함수가 컴포넌트. div 태크로만들어진 JSX를 반환한다.
ReactDom이 render 메소드를 이용해서 화면에 그린다.

JSX로 컴포넌트를 만드는것과 함수형태로 컴포넌트를 만드는 방식의차이

1. 컴포넌트는 기본적으로 함수이기 때문에 자신만에 고유한 로직이 들거갈 수 있다.
2. 스스로 상태를 가질 수 있다.

컴포넌트 생성시 주의사항

• 컴포넌트 이름은 PascalCase
  • MyComponent
  • ArticlePage
  • UserProfile
• 컴포넌트는 의미 단위로 쪼개서 파일을 분리한다.
  • header, content, footer ...
  • 각 컴포넌트가 역할을 가지도록한다.
• 최 상위 컴포넌트는 일반적으로 App이다.
• App컴포넌트를 ReactDom.render() 를 이용해서 랜더링 하는 코드는 일반적으로 index.js에 넣는다.
• index.js 는 모든 컴포넌트의 엔트리 포인트, App.js는 모든 컴포넌트의 root 컴포넌드

Props

• 프로퍼티의 줄임말.
• 컴포넌트에서 하위 컴포넌트로 어떤 값을 전달해줄때 사용하는 요소

function App() { 
  return( 
    <div> <MyComponent value={'test'} /> </div> 
  ) 
} 

function MyComponent(props) { 
  return <div>{props.value} </div> 
}

• App Component가 하위 컴포넌트인 MyComponent로 데이터를 전달해줌.
• 전달반은 데이터는 object형태이며, 전달 했던 속성 이름으로 접근해서 사용할 수 있음.

    function App() { 
    return(
     <div>
       <MyComponent>
         <h1> value </h1> 
       </MyComponent>
     </div>
    )
    }


  function MyComponent(props) {  
    return
      {props.children}
    }

• 상위 컴포넌트가 값을 감싸는 형태로 전달도 가능. 이때는 props에서 children을 이용해서 접근
• 이때 children으로 전달받은 데이터는 <h1> 태그로 이루어진 JSX 값이다.

Props 활용팁.

• 구조분해 할당을 잘 활용한다.
• 특정 Props에 기본 값을 줄 수 있다.(defaultProps).
• Props는 읽기 전용.

State

• 컴포넌트 내부에서 사용되는 변수
  • state 값이 변하면 컴포넌트가 리렌더링됨.
  • 렌더링 사이클에서 값이 보존됨

function App(){ 
  const[value, setValue] = useState(); 
  return ( 
    <div> {value} </div>
  ) 
}

• useState를 사용하면 value와 setValue를 리턴해준다.
• setValue를 이용하면 value를 set할 수 있으며 이때 리 랜더링이 실행됨
• value가 set 되는 시점은 리렌더링이 된 이후라는점에 주의해야함.

Hooks

• 클래스형 컴포넌트의 단점을 보완하기 위해 함수형 컴포넌트에 지급된 개념
• 지금까지는 함수형 컴포넌트를 사용했다.
• 하지만 클래스형 컴포넌트라는 방식도 있다.
  • 과거에 useState 같은 Hooks는 이용할 수 없었기때문에 클래스형 컴포넌트를 이용했다.
  • 클래스형은 몇가지 안좋은점이 있어서 점점 안쓰게 되었다.