coding404

1. 리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다
2. state가 체인지 되면 변화를 감지하여 리렌더링을 수행합니다.
3. 클래스 vs 함수형 컴포넌트에서 사용하는 방법이 다릅니다.
4. 함수형 컴포넌트에서는 훅 Hook개념을 이용해서 더욱 쉽게 사용 가능 합니다.

나의 첫번째 훅

useState(초기값) 

useState() : 배열반환 

첫번째 배열의 요소에는 현재값을, 두번째 요소는 상태를 변경하는 (setter) 를 반환합니다.

const [data, setData] = useState('초기값')

state는 어떤 타입이던 상관 없습니다. (str, number, object)

state는 여러개 일 수도 있습니다.

state는 직접 수정하면 안 됩니다. setter를 사용하세요!

const StateComponent = () => {

    const [msg, setData] = useState('초기값')

    const enter = () => setData('입장했습니다')
    const exit = () => setData('퇴장했습니다')

    return (
        <div>
            <h3>{msg}</h3>
            <button onClick={enter}>입장</button>
            <button onClick={exit}>퇴장</button>
        </div>
    )

}

1. 컴포넌트

컴포넌트는 함수형, 클래스형 2가지입니다.

함수형

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

클래스형

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

수업에서는 함수형 컴포넌트를 사용합니다.

어떻게???

모듈내보내기 - 외부에서 사용할 모듈 이름을 지정합니다.
- export default 이름 

모듈불러오기 - 부모컴포넌트에서 사용
import 이름 from 경로;

컴포넌트 합성

- 예를 들어 Welcome을 여러 번 렌더링하는 App 컴포넌트를 만들 수 있습니다.

//상위
function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

//하위
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

2. props (중요)

상위 컴포넌트에서 하위컴포넌트로 전달하는 매개변수 입니다.

하위 컴포넌트에서 사용할 때는 {}를 이용해서 값을 받을 수 있습니다.

상위 컴포넌트에서는 컴포넌트의 속성값을 동일이름으로 지정합니다.

//상위
const App = () => {
    return ( 
    	<Fragment>
        	<MyComponent name={"홍길동"} age={2} email={"aa@naver.com"}/>
    	</Fragment>
    )
}

//하위
const MyComponent = ( {name, age, addr, email} ) => {
   return (
        <div>
            나의 첫번째 컴포넌트<br/>
            프로퍼티1:{name}<br/>
            프로퍼티2:{age}<br/>
            기본값 프로퍼티3:{addr}<br/>
        </div>
   )

props의 기본값 설정하기 (주의 - 대소문자 정확하게 구분함  )

컴포넌트명.defaultProps = {}

MyComponent.defaultProps = {
    addr: '서울시',
    age: 0    
}

props의 타입검증 (주의 - 대소문자 정확하게 구분함  )

컴포넌트명.propTypes = {}

MyComponent.propTypes = {
    name: PropsTypes.string,
    age: PropsTypes.number,
    email: PropsTypes.string.isRequired //필수값(상위컴포넌트에서 반드시 전달)

}

1. 리액트란?

- 리액트는 자바스크립트 라이브러리 입니다.

- 구조가 MVC, MVVM과 같은 다른 프레임워크등과는 다르게 오직 View만 처리하는 라이브러리 입니다.

SPA란?

- Single Page Application의 줄임말 입니다.

- index.html하나만 로드하고 실행시키는 구조입니다.

어떻게?

번들러(Webpack)가 이 모든것을 해줍니다.

Webpack이란 어플리케이션을 동작시키는데 필요한 자원(JS파일들, CSS, Image 등)을 하나로 묶어서 조합하여 경량화 하여 결과물을 만들어 주는 도구입니다.

번들러는 node.JS를 통해 직접 설정 할 수 있지만, 리액트 프로젝트를 생성시 자동으로 포함됩니다.

DOM (Document Object Model) 이란?

- HTML을 이해하기 쉽도록 트리 구조로 만들어진 태그(객체)들 입니다

리액트의 Virtual DOM 이란?

HTML에서 DOM을 조작하여 처리할 때, DOM핸들링 자체는 빠릅니다.

하지만, 웹 브라우저가 DOM의 변화를 감지하고, CSS를 적용하고, 처리하는 과정에서 시간이 많이 소요됩니다.

리액트의 Virtual DOM은, 이를 추상화시킨 자바스크립트 객체를 이용해서, 바뀐 부분만 부분적으로 리렌더링 하여 사용 하는 방법입니다.

걱정마세요 리액트가 해줄거에요

2. 환경설정하기

1. node.js 다운. 설치

2. 에디터 vscode 설치

3. create-react-app으로 프로젝트 생성하기

npm create react-app 프로젝트명

4. 프로젝트  시동하기

npm start

리액트 코드 살펴보기

1. index.js

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
	<React.StrictMode>
   		<App />
	</React.StrictMode>
);

index.html에 id가 root인 값을 얻습니다

React.StricMode는 옛날 기능을 사용할때 경고를 출력하는 기능입니다(클래스형 컴포넌트)

root의 render함수는 App컴포넌트를 화면에 그립니다

2. App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

- return (JSX) 문장을 반환합니다.

- export default App 로 모듈을 빼냅니다.

- Index.js 파일에서 <App/> 로 사용됩니다.

- JSX란?

JS의 확장 문법으로 (HTML에 JS코드를 녹여낸 형태) 입니다.

- 코드를 수정하게 될 때 자동으로 화면이 리렌더링 됩니다. (웹팩 로더가 동작)

- Webpack Loader는 직접 설정(커스터마이징)도 가능하고, create react-app 생성시 자동으로 해줍니다.

Webpack Loader는 다양한 종류가 있습니다.
1. css로더 - css로드
2. file로더 - 폰트,이미지, 파일 등 로드
3. babel로더 - ES6문법을 화면에서 사용할 ES5문법으로 다운그레이드 하여 변환해 줍니다.

JSX의 문법

1. JSX의 주석 alt + shift + a
2. JSX문법 - 반드시 하나의 태그를 return 해야 합니다.
3. div를 사용하기싫다면 Fragment컴포넌트를 이용하면 됩니다.
4. 함수안에서 만들어진 변수는  중괄호 {name} 로 참조할 수 있다.
5. if문 대신 3항연산자를 이용한다.
6. 화면에 보여주고싶은게 없다면 null을 이용합니다.
7. undefind을 반환하는 상황을 만들면 안 됩니다. 
8. DOM요소에 스타일을 직접 넣을때는 반드시 객체형 객체로 묶고 속성은 카멜 표기법을 사용합니다.
9. class대신 className을 사용합니다.
10. 홀로 사용하는 태그는 닫는태그를 반드시 작성합니다.