06221ac4ae96f681e3bed114dd1bdd9f.jpg

[REACT]

페이스북과 인스타그램에서 만든 사용자 인터페이스 라이브러리.
프레임워크x.
리액트에서는 컴퍼넌트를 만들어서 화면에 뿌려주고 해당 컴퍼넌트를 다른 곳에 지속적으로 사용할 수 있어 재사용성이 높고,기존 자바스크립트 프레임워크나 다른 라이브러리와 함께 쓸 수 있다.

JSX ; javascript 확장 문법.

꼭 하나의 태그로 시작하기, 무조건 부모가 있어야 함.
tag 만 나란하게 2개로 있으면 안됨. 있어도 되는 데 부모 태그 안에 있어야함
JSX내에서 js사용하려면 중괄호

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

 const hi = <p>Hi</p>;
//속성에 따옴표를 이용해 문자열을 정의.
const element = <div tabIndex="0"></div>;
//중괄호를 사용하여 attribute에 JavaScript 표현식을 삽입.
const element = <img src={user.avatarUrl}></img>;

-attribute에 JavaScript 표현식 사용 시,
따옴표(문자열 값에 사용) or 중괄호(표현식에 사용) 중 하나만 사용. 동일한 속성에 두 가지를 동시에 사용 안돼안돼.
-self-closing tag : tag사용시 , <div/> = <div></div>와 같음

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 : 리액트 컴포넌트 내에 있는 걸 가져오겠다는 뜻, 클래스에서 쓰는 약속. 꼭 써야함.



::다소 거북이같이 가고 있는 데요, 엉금엉금 그래도 꾸준히 가고 있습니다:)
갈 길이 머네요!