til.5 리액트 (리액트 시작부터 용어들)

TaengEe·2022년 12월 7일
0

cd 이동할 파일명
cd .. 이전 위치로
yarn start
yarn create react-app 새로운 파일 명


리액트 코딩 룰 1### :

폴더는 소문자로 시작하는 카멜케이스를 사용
JS파일, 컴포넌트 이름은 대문자로 시작하는 카멜케이스를 사용


import React from "react"; (리액트 패키지에서 리액트를 가져온다.)

component : html로 따지면 하나의 섹션? 큰 div를 뜻한다. react는 컴포넌트들의 묶음이다.

constructor : 생성자 함수, 초기 값 설정때 사용? (class부터 잘 모르겠음)

componentDidMount : 페이지에 컴포넌트를 찍는 것을 말한다. 는 첫 렌더링시에만 찍힌다.
render : 컴포넌트를 읽고 어디에 위치할 지 정의하는 용도?
componentDidUpdate : 리랜더링을 했을 시에만 찍힌다.


DOM : 부모자식의 요소를 가진 트리구조를 뜻한다.
가상 DOM : 전체가 아닌, 일부의 요소만 바뀌면 될 때 사용되는 데이터 상에만 존재하는 DOM이다.
라이프사이클 : 정보가 생성, 업데이트, 삭제가 되는 모든 구조를 뜻한다.

생성과 업데이트를 할 땐, 랜더 과정을 거쳐 진행된다.

PROPS : 부모요소에서 자식에게 정보를 상속받을 때
STATE : 자신이 가지고 있는 정보
리랜더링 : 부모요소가 업데이트 될 때

자신이 가진 state는 수정이 가능하지만 props는 다른 곳에서 가져왔기 때문에 가져온 곳에서만 수정이 가능하다.


export default 컴포넌트명; : 다른 곳에서 해당 컴포넌트를 쓸 수 있게 내보내줌.
(export {컴포넌트명};)

import 컴포넌트명 from "위치"; : 다른 곳에 위치한 컴포넌트를 불러옴.
(import {컴포넌트명} from "위치";)


super(); 를 사용하는 이유###

constructor(생성자 함수) 내부에서 this를 사용하기 위함

https://developer-talk.tistory.com/136
Class 컴포넌트에서 부모 클래스는 React.Component를 말합니다.
여기서 중요한 점은 JavaScript에서 super()를 선언 전까지 constructor() 안에 this 키워드를 사용할 수 없습니다.

※ constructror() 또는 super()에 props를 전달하지 않더라도 super() 선언 전에 this 키워드 사용 시 에러 발생합니다.

profile
hi im Taen

0개의 댓글