[한입 크기로 잘라 먹는 리액트] React 입문

1. React 입문

1. 리액트를 쓰는 이유 1 : 중복 수정

-> 각 부분을 컴포넌트로 나누어서 코딩 (단어 하나 입력으로 간단하게)

 

리액트는 컴포넌트 기반의 Javascript UI라이브러리이다. 산탄총수술할 일이 없다.

 

2. 리액트를 쓰는 이유 2 :  명령형 프로그래밍(jquery) 대신 선언형 프로그래밍(react)

절차 나열 대신 목적을 바로 말한다

 

3. 리액트를 쓰는 이유 3 : 가상 돔(virtual dom)

dom(document object model) 브라우저가 실제로 사용하는 객체

돔을 계속 변경하게 되면(ex append)필요이상의 연산을 수행하면 성능저하의 문제가 발생할 수 있다.

 

2. Create React App

Webpack : 다수의 자바스크립트 파일을 하나로 합쳐주는 모듈 번들 라이브러리

Babel : 자바스크립트 컴파일러. 라이브러리

 

Boiler Plate : 이미 세팅된 패키지

 

npx : 한번만 사용할 때

npx create-react-app reactexam1 : reactexam1이라는 리액트 앱 생성

npm start : localhost:3000

node-modules를 지웠다면 npm i를 하면 된다.

favicon.ico : 웹사이트의 아이콘

 

js와 html합쳐서 사용할 수 있는 자바스크립트 표현식 -> jsx

 

module.export대신 export default App; -> ES모듈 시스템

 

3. JSX

컴포넌트 만들 때 유용.

최상위 부모를 App이라고들 부른다.

 

self-closing tag 규칙 : 열자마자 닫는 <img />같은 태그. jsx는 모든 태그를 닫아주어야한다.

최상위 태그 규칙 : 가장 바깥 태그를 지우게 되면 에러가 발생한다. JSX expressions must have one parent element.

'react' Import 후, React.Fragment로 감싸면 된다.(빈 태그 </> 도 가능)

 

삼항연산자로 조건부렌더링 가능하다.

4. State

계속 변화하는 특정 상태. 상태(동적으로 변하는 값)에 따라 각각 다른 동작

5. Props

컴포넌트에 데이터를 전달한다.

자식 컴퍼넌트에 inititalValue={값} 형태로 옆에 써서 전달 or 스프레드 연산자 사용하여 전달

전달한 값은 객체에 담겨서 오기 때문에 점표기법 쓰기.

 

받을 때에, 비구조화 할당으로 받을 수 있다.

      

      

      

    
    

      <javascript />
    
Counter.defaultProps = {
    initialValue: 0,
};

 

를 추가적으로 써주면 값을 받아오지 못하더라도 오류 생기지 않는다.

부모 컴퍼넌트가 내려주는 props가 변경되면, 자식 컴퍼넌트도 다시 렌더하게 된다.(rerender)