[포스코x코딩온] 웹개발자 입문 과정 8주차 1회고 | react

dazzle·2023년 4월 18일
1

포스코X코딩온

목록 보기
9/11

백엔드 과정의 node.js 부분을 간략하게 배운 후
(node.js부분과 개인미니프로젝트 회고록은 작성중,,)
프론트엔드로 다시금 넘어왔다 !

react를 배우기 시작했다. 기대가 갱장히! 된다!!

🐾 React

👣 React란

화면을 만들기 위한 자바스크립트 라이브러리


👣 특징

  1. Data Flow

    		•양방향 X 단방향O 데이터흐름
    		•Angular JS 처럼 양방향 데이터 바인딩은 규모가 커질수록 데이터의 흐름을 추적하기 힘들고 복잡해지는 경향이 있다.
  2. Component 기반 구조

    		•Component: 독립적인 단위의 소프트웨어 모듈로 소프트웨어를 독립적인 하나의부품으로 만드는 방법
    		•React는 UI(View)를 여러 Component를 쪼개서 만든다.
    		•한 페이지 내에서 여러 부분을 Component로 만들고 이를 조립해 화면을 구성
  3. Virtual DOM

    		•DOM : Document Object Model ( 문서 객체 모델 )
    		•React는 DOM Tree 구조와 같은 구조를 Virtual DOM으로 가지고 있다.
    		•이벤트가 발생할 때마다 Virtual DOM을 만들고 다시 그릴 때 실제와 전후 상태를 계속 비교 -> 앱의 효율성과 속도개선
  4. Props and State

    			•Props
    				•부모 컴포넌트에서 자식 컴포넌트로 전달해주는 데이터
    				•자식에서는 props 변경 불가능, props를 전달한 최상위에서만 변경 가능
    			•State
    				•컴포넌트 내부에서 선언되고 내부에서 값을 변경
    				•클래스형 컴포넌트에서만 사용 가능, 각각의 state는 독립적 ( 함수형에서는 NO! )
  5. JSX

    			•React 에서 JSX 사용이 필수는 아니지만 많이 사용된다!
    			•JSX = Javascript + XML

🧨 React 실행방법

npx create-react-app (my_react) => ( ) 부분에 폴더명을 작성! ()는 빼고 작성한다.
cd my_react => 폴더 위치로 이동한다.
npm start => 이러면 끝!

다음편 예고) - jsx에 대해 알아보자! =3=3

0개의 댓글