React

//HTML과 비슷하게 생겼고 js파일 내에서 사용가능
//html문법을 js코드 내부에 써주는 것이고 변수저장 및 함수 인자로 ,넘길 수 있다.
 
 const hi = <p>Hi</p>;

//속성에 따옴표를 이용해 문자열을 정의.
const element = <div tabIndex="0"></div>;

//중괄호를 사용하여 attribute에 JavaScript 표현식을 삽입.
const element = <img src={user.avatarUrl}></img>;

= 와 같음

Component ; 컴포넌트는 함수 컴포넌트과 class컴포넌트가 있음.

컴포넌트란 재사용이 가능한ui 단위
컨포넌트 하나만 만들고 그 하나의 파일에 필요한 html, css,js모두 합쳐서 만들 수 있고 재사용 가능합. input디자인이 바꼈을 때 css한줄만 수정하면 로그인, 회원가입, 내정보수정 페이지에 바뀐 디자인이 모두 반영됨!!
컴포넌트는 함수랑 비슷하고 여기서는 input을 props라고하고 return은 화면에 보여져야할 react요소가 return.

• 함수형

//return할 때 jsx로 리턴. render 필요없음.
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

• 클래스형
  함수 호출하듯이 클래스도 호출해야함.
  클래스 내에서 서로 변수를 쓰려면, 값을 가져오려면 'this'사용해야함. 변수 이름 갖고는 안됨.

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

• Render : 클래스 형일 떄 무조건 render() 함수 사용해서 return을 jsx로 해야함. 그걸 화면에 뿌려줌.
  리액트는 데이터가 바뀔때마다 render가 다시 호출됨
• constructor : 어떤 행동을 하자마자
• event : 무조건 arrow function사용해서 이벤트 걸어야함.
  곧, 브라우져가 갖고 있다는 것.
  ** 'this'는 자기가 속해있는 객체를 뜻함
  (어디에서 호출 되었는지, 호출된 곳의 객체를 가르키는데 자꾸 window를 가르키게 되서 문제가 많아진 것을 arrow function이 이 나오면서 실제 속해 있는 앱을 가르키게 됨.
  (왜냐하면 브라우져가 갖고 있다가 이벤트를 쏴주게 되니까)

• Props : 컴포넌트에서 사용할 데이터 중 변경되지 않는 데이터를 다룰 때 사용.
  부모 컴포넌트-> 자식컴포넌트로 전달 할 때.
  컴포넌트 간에는 무조건 props를 통해서만 데이터를 주고 받고 props는 내부에서 변경x.
  컴포넌트 간에 단방향으로 데이터를 주고 받음

• state : 유동적인 데이터를 다룰 때 사용.
  사용자의 액션, 네트워크 응답 등등 변경시에는 'setstate'메서드를 사용해서 상태를 변경(state수정할 땐 setstate사용).
  스테이트는 객체로 관리 - 관리해야할 데이터가 많아서
  어떤 스테이트 사용하겠다 정의할때 constructor안에서..

• constructor : 앱이 시작될 때 constructor부터 호출됨
  두번째 호출은 렌더
  (리액트의 라이프 사이클 의미는 어떤 순서로 호출되느냐.
  화면에서 최초에 한번만 불리고 랜더는 state가 변할 때마다 계속 호출됨

• super : 리액트 컴포넌트 내에 있는 걸 가져오겠다는 뜻, 클래스에서 쓰는 약속. 꼭 써야함.