생활코딩 React 2022 4강 정리

파일은 App.js에서 수정이 이루어진다.

React의 본질

사용자 정의 태그를 만드는 기술이다.

컴포넌트(=사용자 정의 태그) 만드는 방법

• 함수를 정의한다. 반드시 첫글자를 대문자로 만든다. ex.

  function Header(){return <header> <h1><a href="/"> WEB</a></h1></header>}
  

• 장점
  • 동시 수정 가능
  • 여러 코드 단순화
  • 이해가 쉬워짐

생활코딩 React 2022 5강 정리

PROP

react에서 속성을 PROP이라고 부른다. ex.

function Header(props){ 
  console.log('props', props, props.title); 
  return <header> 
    <h1><a href="/"> {props.title}</a> </h1> 
    </header>
    }

function App(){return <div> <Header title="REACT"></Header>}

화면 출력 결과 REACT

• 컴포넌트에 중괄호로 파라미터.PROP명 으로 표현하면 속성(=prop)을 표시할 수 있다.
• 리액트는 자동으로(동적으로) 생성한 태그의 경우, react가 추적할 때 근거가 있어야하기 때문에, 유일성이라는 특징을 지켜주어야 한다.