[SeSAC DT 과정] REACT 세팅, 활용

React

1. React란? 👀

• 웹앱을 쉽게 만들 수 있도록 페이스북이 개발한 자바스크립트 라이브러리

  Web-app : 실제로 앱은 아니지만 모바일 앱과 같은 사용성을 지닌 웹

2. React의 장점

• 앱으로 발행이 쉬움 (react native)
• 앱처럼 뛰어난 ux
• 등장 이후 시장 점유율이 안정권으로 접어들었음

3. React 세팅

1. Nodejs 설치
   • 명령어 사용 위함
   • 15,16 버전 설치 권장! 최신 버전인 17은 에러 많음

2. 코드 에디터를 열고 새 폴더 만들기

3. 터미널에 npx create-react-app 플젝명
   • npx는 라이브러리 설치 도와주는 명령어
     -> Nodejs 설치해야 이용 가능
     +) npm (라이브러리 설치 도와줌)이라는 툴 이용 가능
4. 3번에서 만든 플젝명 폴더(자동 생성됨) 다시 오픈

5. 코딩 시작! (터미널에 npm start 입력 후 엔터 -> 실행)

⬆️ Blog라는 프로젝트 폴더를 생성한 모습

• App.js을 index.html에 넣어주는 것이 index.js
• Public 폴더 : static file (동적 요소 없이 고정되어 있는 파일)
• Src 폴더 : 소스코드 보관함

3-1. React 내의 JSX 문법 ⭐️ 참고링크

• 자바스크립트 파일에서 html처럼 쓸 수 있도록 만든 문법!
• 데이터 바인딩이 쉬움
  - 데이터 바인딩 : 서버에서 받아온 데이터 -> 자바스크립트 변수로 받아서 html 내에 보여줌
  Ex) documnet.getelementbyId.(요소) -> {변수명}
  

4. React component ⭐️참고링크

4-1. MVC

React는 MVC(Model–View–Controller) 이다.

• Model은 데이터 정보, View는 화면, Controller는 구동을 위한 매개체

• 뷰 -> 컨트롤러 -> 모델

• 동작을 거의 동시에 같이 하므로 상호의존적이게 됨.
  -> 💡 각각을 독립적으로 재사용 가능하도록 컴포넌트라는 코드 조각을 사용.
  
  

  ---

4-2. 컴퍼넌트 구성요소

• Property 프로퍼티, props : 상위 컴퍼넌트에서 하위 컴퍼넌트로 전달되는 데이터 값(속성)
• State : 컴퍼넌트의 상태를 저장하고 변경
• Context : 부모 컴퍼넌트에서 생성해서 모든 자식 요소로 전달되는 데이터

1) props

• default props : 값이 들어오지 않았을 때 사용할 값

• props는 값을 설정하지 않으면 true으로 리턴

• 상위 컴포넌트에서 하위 컴포넌트로 전달
  (하위 컴포넌트에서 props은 읽기 전용)

• defaultProps

• propTypes

• isRequired

2) state

• 동적으로 값을 쓸 수 있다.

• 함수컴포넌트 사용하는 useState 함수

  Const[number, cngNumber] = useState(0)
  

• 초기값 필요! (0)

• Number = 현재 상태

• cngNumber = 최신값 (갱신된 상태)
  
  

3) context

• 부모에서 자식으로 prop를 통해 값을 넘겨 주는 것이 번거로울 때(여러 컴포넌트에게 전해줘야할 때 Ex) 브라우저 다크모드) 전역으로 값을 사용할 수 있게 해준다.

• 많이 안 쓰는 이유 -> 값이 변경이 되면 자동으로 재렌더링 되기 때문에 효율성이 떨어진다.

---

4-3. 함수형 컴포넌트, 클래스형 컴포넌트

1) 함수형 컴포넌트

• return 문이 jsx 구문을 반환

  import React from 'react';
  
  function Item(){
  	return(
      	<div>Contents</div>
      )
  }
  export default Item;

2) 클래스형 컴포넌트

• render() 함수가 jsx 구문을 반환

  import React from 'react';
  
  class Item extends React.Component{
      constructor (){
          super()
      }
      render(){
          return(
              <div>Contents</div>
          )
      }
  }
  export default Item;