[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 17회차 미션

이제부터는 리액트 수업을 정리하여 업로드 할예정이다

React

JSX 규칙

1. tag는 꼭 닫아야한다.

• 태그 사이에 별다른 값이 없는 경우 self closing tag 사용 가능

  <Hello><Hello/>
  ===
  <Hello />

  2. 2개 이상의 태그는 하나의 태그로 감싸져 있어야함.

  • <></> 로 감싸는 방법도 존재함.

    return (
      <div>ㅎㅇ</div>
      <div>ㅂㅇ</div>
    );
    //사용 불가.

    return (
    <div>
        <div>ㅎㅇ</div>
        <div>ㅂㅇ</div>
    </div>
    );
    ===
    return (
    <>
        <div>ㅎㅇ</div>
        <div>ㅂㅇ</div>
    </>
    );

---

JS값 출력JSX내부에서 javascript 값을 보여주고 싶을 때  
변수를 {}로 감싸고 출력하면 된다.

```
function App() {
const name = 'jiwon';
return (
  <>
    <div>{name}</div>
    <div>ㅂㅇ</div>
  </>
);
}
```

스타일 지정style을 지정해 주고 싶을 때  
기존 html 에서 style을 지정해주는 방식과는 다르게 객체를 만들어줘야한다.

기존 css에서는

background-color : #fefefe;

이런 형태로 스타일을 지정했지만.

JSX에서는 style명에 -로 구분된경우 camelCase를 사용한다.

const style = {
    backgroundColor : '#e3e3e3',
    fontWeight: 'bold',
    fontsize: '2em',
    padding: '10px'
};

class 지정

기존 html에서는

<div class="myClass"></div>

형태로 클래스를 지정해줬지만

JSX에서는 className 을 사용하여 클래스를 지정해준다.

/* App.css */
.myClass{
  background-color:#42AB28
}

/* App.js */
.
. 기존 코드
.
import './App.css'; // App.css import
.
.
  return (
    <>
      <div className="myClass">ㅂㅇ</div>
    </>
  );

주석

  // 한 줄 주석
  /* 여러 줄 가능 */

props 를 통해 컴포넌트에 값 전달

Hello 컴포넌트에 name이라는 값을 전달하기 위해서

/* App.js */
function App() {
  return (
    <Hello name ="jiwon"/>
  )
}

를 추가해주고

/* Hello.js */
function Hello(props){
    console.log(props); 
    return <div>ㅎㅇ</div>;
}

함수에서 props 라는 파라미터를 가져온다.

name 값을 컴포넌트 내부에서 보여주고 싶다면.

{props.name}을 추가해준다.

/* Hello.js */
function Hello(props){
    console.log(props); 
    return <div>ㅎㅇ {props.name}</div>;
}

또 다른 값을 추가 할 때는

/* App.js */
function App() {
  return (
    <Hello name ="jiwon" color="green" />
  )
}

으로 color 값을 추가해주고

/* App.js */
.
.
function Hello(props){
    return <div style={{color:props.color}}>ㅎㅇ {props.name}</div>;
}

div style속성에 color를 추가해준다 이때 {{}}로 감싸지는 이유는 내부의 {}는 객체를, 이 객체를 감싸는{}로 이뤄지기 때문임.

하지만 props를 계속 중복해서 사용하지 않고 구조 분해를 하여 이를 생략하는 법도있다.

function Hello({color, name}){
    return <div style={{color:color}}>ㅎㅇ {name}</div>;
}

color : color 도
그냥 color 로 생략 가능함.

props 를 지정하지 않고 default 값을 설정하는법.

.
.
Hello.defaultProps={
    name: 'default name'
}
// 위의 내용을 추가해준다.
export default Hello; // Hello component 를 내보낸다.

default 값 설정확인을 위해

function App() {
  return (
    <>
    <Hello name ="jiwon" color="green"/>
    <Hello color="pink" />
    </>
  )
}

로 Hello 태그를 하나 추가해서 name값을 주지 않으면
앞서 설정한 default 값인 default name 이 출력된다.

Props children

import React from 'react';

function Wrapper(){
    const style = {
        border : '3px solid black',
        padding : 10
    };

return <div style={style}></div>
}
export default Wrapper;

src > Wrapper.js 파일 생성

import React from 'react';
import Hello from './Hello'; // .js 생략가능
import Wrapper from './Wrapper';
function App() {
  return (
    <Wrapper>
    <Hello name ="jiwon" color="green"/>
    <Hello color="pink" />
    </Wrapper>
  )
}

export default App;

이 상태로 실행하게되면
Wrapper 내부의 값들이 보이지 않게 된다.
이 를 해결하기 위해 props.children 을 사용하면된다.

따라서

/* Wrapper.js */
import React from 'react';

function Wrapper({children}){
    const style = {
        border : '3px solid black',
        padding : 10
    };

return <div style={style}>{children}</div>
}
export default Wrapper;

Wrapper에서 chilren을 비구조할당을 사용해서 불러오고 return에 chilren을 렌더링 해주면 된다.

 

조건부 렌더링

자바스크립트에서 동작하는 것과 동일하게 동작함.

if나 조건연산자 같은 연산자를 사용해서 상황별로 다른 결과 값을 렌더링 할 수 있음.

/* App.js */
  return (
    <Wrapper>
    <Hello name ="jiwon" color="green" isSpecial={true}/>
    <Hello color="pink" />
    </Wrapper>
  )

App.js에서 Hello컴포넌트에 isSpecial이라는 props를 설정해준다.

/* Hello.js */
function Hello({color, name, isSpecial}){
    return <div style={{color}}>
        {isSpecial ? <b>*</b> : null}
        ㅎㅇ {name}</div>;
}

이후 Hello.js 에서

{isSpecial ? <b>*</b> : null}

형태의 삼항연산자를 추가해주는데
이는 isSpecial의 값이 true이면 *을 false 면 null을 출력해 준다.

JSX에서 null , false , undefined 등을 렌더링하면 아무것도 나타나지 않는다. (0 은 제외)

이를 응용하여 여러 형태의 조건부 렌더링을 구현할 수 있다.

{isSpecial && <b>*</b>}

를 사용하면 isSpecial이 True이면 *을 렌더링하고 False 이면 && 연산이 false 가 되기 때문에 아무것도 출력되지 않는다.

useState Hook

Hook이란?

Hook은 React 16.8에 새로 추가된 기능입니다. Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줍니다.
자세히보기

src > Counter.js 생성

/* Counter.js */
import React, { useState } from 'react';

function Counter(){
    const [count, setCount] = useState(0);
    const upCount = () => {
        setCount(count + 1);
    };
    const downCount = () => {
        setCount(prevCount => prevCount-1);
    }
    return(
        <div>
            <p>count : {count}</p>
            <button onClick={upCount}>up</button>
            <button onClick={downCount}>down</button>
        </div>
    );
}

export default Counter;

이 예제에서 useState가 Hook이다. Hook을 호출해 function component내부에 state(예제에서 count라는 상태변수를 선언했음)

const [count, setCount] = useState(0);

useState는 현재의 state값과 이 값을 업데이트 하는 함수를 쌍으로 제공함.

배열 구조 분해 문법으로 useState로 호출된 state 변수들을 다른 변수명으로 할당할 수 있게해줌.

 

해당 내용은 아래 링크에서 수강할 수 있다.

프론트엔드 개발 올인원 패키지 with React Online. 👉https://bit.ly/2ETLEzm

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스