React_기초 다지기[컴퍼넌트,State, Props 등]

React

---

Why React?

⚐ 리액트를 사용하는 다양한 이유가 존재하지만, 간단하게 정리하면!

• Shotgun Surgery : 산탄총 수술
  : 이전 Js 코드가 많은 부분 겹치게 되면서, 특정 코드를 수정하고 싶지만,
  이 코드를 사용하는 여러 곳을 전부 수작업으로 수정해줘야하는 고충이 존재한다.
  ->React는 컨퍼넌트 방식을 이용하여, 효과적으로 해결 할 수 있음!
• Virtual DOM의 존재
  : React의 가장 큰 특징 중 하나
  기존의 DOM은 내가 수정을 할때마다, HTML을 새로 로드하면서 DOM전체를 바꾸는 형태
  하지만, Virtual DOM 같은 경우는 React 컴포넌트 리턴하는 값에 의해 만들어져서
  실제 보이고 있는 DOM과 비교해서 달라진 부분만 찾아내어 바꾸게 된다.
• 다양한 커뮤니티, 앱 개발 기능, 여러 장점이 존재

✓컴포넌트

:컴포넌트를 통해 사용자에게 보여지는 UI를 재사용 가능한 개별적인 여러 조각으로 나누고 각 조각을 개별적으로 살펴볼 수 있음

▸함수형 컴포넌트와 클래스형 컴포넌트

[함수형 컴포넌트]

import './App.css' ;

function App(){
    const name = '리액트';
    return <div className="react">{name}</div>;
}

export default App;

[클래스형 컴포넌트]

class App extends Component{
    render() {
        const name = '리액트';
        return <div className="react">{name}</div>;
    }
}

export default App;

➤ 두 가지 함수 모두 같은 역활을 한다.
➤ 두 함수의 차이점은 클래스형컴포넌트의 경우 state 기능 및
라이프사이클 기능을 사용할 수 있다는 것과 임의 메서드를 정의할 수 있다.

▸함수형 컴포넌트의 장단점

• 함수형 컴포넌트 장점
  : 클래스형 컴포넌트보다 선언하기가 훨씬편하다.
  : 메모리 자원도 클랫형 컴포넌트보다 덜 사용한다.
• 함수형 컴포넌트 단점
  : state와 라이프사이클 API의 사용이 불가능함. (이 단점은 v16.8업데이트 이후 Hooks 기능 도입으로 어느정도 해결)

▸모듈 내보내기(export) 및 불러오기

:모듈 내보내기 및 불러오기는 다른 파일에서 다른 파일로 서로 정보를 주고 받는 과정

▸모듈 내보내기 : export

//Myc.js - 맨 아래 코드
.
.
.
.
export default Myc;

-> 다른 파일에서 Myc라는 파일을 import할 때, 위에서 선언한 Myc클래스를 불러올 수 있도록 설정
//외우자!

▸모듈 불러오기 : import

improt Myc from './Myc';

const App = () => {
 return <Myc />;
};

export default App;

->App 컴포넌트에서 import구문을 사용하여 Myc컴포넌트를 불러와서 사용

---

✓ props

: properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소

☑︎props를 랜더링할 떄는 JSX 내부에서 {}기호로 감싸주자!

const Myc = props => {
 retrun <div>안녕하세요, 제 이름은 {props.name}입니다.</div>;
};

export default Myc;

▸컴포넌트 사용할 때 props 값 지정하기

improt Myc from './Myc';

const App = () => {
 return <Myc name="React" />;
};

export default App;

▸태그 사이의 내용을 보여주는 children

improt Myc from './Myc';

const App = () => {
 return <Myc>리액트</Myc>;
};

export default App;

const Myc = props => {
 retrun <div>안녕하세요, 제 이름은 {props.name}입니다.<br />
 childern 값은 {props.childeren}입니다.
</div>;
};

Myc.defaultProps = {
 name: "기본 이름"
};

export default Myc;

-> 브라우저에는 안녕하세요, 제 이름은 기본 이름입니다. children 값은 리액트입니다. 라고 출력된다
즉, Myc태그 사이에 작성한 것을 출력하려면 childern값을 보여줘야함

▸비구조화 할당 문법을 통해서 props 내부 값 추출

const Myc = ({name, children}) => {
 retrun <div>안녕하세요, 제 이름은 {name}입니다.<br />
 childern 값은 {childeren}입니다.
</div>;
};

Myc.defaultProps = {
 name: "기본 이름"
};

export default Myc;

-> props를 사용할 때 이렇게 파라미터 부분에서 비구조화할당 문법을 사용하면 훨씬 코드도 간결해지고 편해진다

▸propType를 통한 props 검증

//propType을 사용하려면 import구문을 사용하여 불러와야함

import PropTypes from 'prop-types';

const Myc = ({name, children}) => {
 retrun <div>안녕하세요, 제 이름은 {name}입니다.<br />
 childern 값은 {childeren}입니다.
</div>;
};

Myc.defaultProps = {
 name: "기본 이름"
};

Myc.propTypes = {
 name ProTypes.string
};

export default Myc;

-> 이렇게 설정해주면 name의 값은 무조건 문자열 형태로만 전달해야된다. 만약 그렇지 않으면 error발생

improt Myc from './Myc';

const App = () => {
 return <Myc name{3}>리액트</Myc>;
};

export default App;

-> 이런식으로 하게되면, props가 propTypes에서 지정한 형태와 일치하지 않아 error발생

▸만약 필수 props를 설정하고 전달해주지 않으면 경고 출력

import PropTypes from 'prop-types';

const Myc = ({name, favoritNumber, children}) => {
 retrun <div>안녕하세요, 제 이름은 {name}입니다.<br />
 childern 값은 {childeren}입니다.<br />
 제가 좋아하는 숫자는 {favoritNumber}입니다.
</div>;
};

Myc.defaultProps = {
 name: "기본 이름"
};

Myc.propTypes = {
 name : ProTypes.string
 favoritNumber : PropTypes.isRequired // 필수 prop를 지정하고 제대로전달하지 않으면, error
};

export default Myc;

const Myc = ({name, children}) => { // favoriteNumber을 설정하지 않으면 에러발생 -> favoriteNumber={1} 줘야함 
 retrun <div>안녕하세요, 제 이름은 {name}입니다.<br />
 childern 값은 {childeren}입니다.
</div>;
};

Myc.defaultProps = {
 name: "기본 이름"
};

export default Myc;

✓상태(state)란?

:계속해서 변화하는 특정상태 / 상태에 따라 각각 다른 동작을 함
ex) 사람들은 시간에 따라배고픔을 느낀다. 밥을 먹고 나서는 배부름을느끼게되고, 소화를 시키기 위해 행동한다.
이후 시간이 흘러 소화가 어느정도되어, 적당한 상태가 되었고, 일상생활을 한다.
좀 더 시간이 흐르면 사람은 배고픔을 느끼고, 밥을 먹기 위해 행동한다.
☑︎즉, 상태는 어떤 상황에 따라 각기 다른 행동들을 하는 것

▸useState : 가장 기본적인 Hook이며, 함수 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해준다.

ex) useState기능을 사용해서 숫자 카운터 구현 예시
//useState는 코드 상단에서 import 구문을 통해 불러온다.

//[Counter.js]
import React from "react" './Counter';

const Counter= () =>{
    const [value,setValue] = useState(0);

    return (
        <div>
            <p>
                현재 카운터 값 <b>{value}</b>입니다.
            </p>
            <button onCilke={() => setValue(value+1)}>+1</button>
            <button onCilke={() => setValue(value-1)}>-1</button>

        </div>
    );
};

export defualt Counter;

• const [value,setValue] = useState(0);에서 useState 함수의 피라미터에는 상태의 기본값을 넣어준다.
  현재 0을 넣어주었는데 이는 즉, 카운터의 기본 초기값을 0으로 설정하겠다는 의미이다.
  +1 버튼을 누르게 되면 value의 값은 0+1=1 ,1+1 =2 ...

//[App.js]
import Counter from './Counter';

const App = () => {
    return <Counter />;
};
export default App;

->App 컴퍼넌트에 Counter컴포넌트를 랜더링!

☆ useState를 자세히 보면?

• useState는 하나의 상태 값만 관리할 수 있다. 하지만 관리해야해야할 상태가 여러 개라면 useState를 여러 번 사용하면 된다 !
• setState같은 경우는 값을 업데이트 하는 파라미터로 넣어줄 수도 있음
• 항상 초기값 설정을 확인하자!

▸useEffect : 리엑트 컴포넌트가 랜더링될 떄마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다.

▸useReducer : useStae보다 더 다양한 컴포넌트 ㅏㅇ황에따라 다양한 상태를 다른값을 업데이트할 수 있는 Hook이다.

▸useMemo : 함수 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다.

▸useCallback : useMoemo와 상당히 비슷하며, 주로 랜더링 성능을 최적화해야하는 상황에서 사용된다. / 만들어 놨던 함수 재사용 가능

▸useRek : 함수컴포넌트에서 ref를 쉽게 사용할 수 있도록 해준다.

◆ use 상태 같은 경우는 여러가지 좀 자세히 보아야할 부분이 있어서 위에 Hook들을 좀더 공부하면 더 자세히 포스팅해봐야겠다.