2021.03.21

1. JSX
1) 태그에 style과 CSS class를 설정하는 방법

   ① css 파일을 만들지 않는 경우 : background-color → backgroundColor

   ② css 파일을 별도로 만드는 경우 : import 후 className 속성으로 등록

 

2) 주석을 작성하는 방법

 : { /* */ }

 

3) props

** props를 통해 컴포넌트에게 값 전달하는 방법

   ① <컴포넌트명 속성명1=값1 속성명2=값2/>
      function 컴포넌트명(props) {
          "props.속성명" 으로 사용
      }

   ② <컴포넌트명 속성명1=값1 속성명2=값2/>
      function 컴포넌트명({속성명1, 속성명2}) {
          "속성명1" 으로 사용
      }

 

** 기본값을 설정하는 방법

    컴포넌트명.defaultProps = {
        설정할 내용
    }

 

[예] 기본값을 설정하지 않는다면

[예] 기본값 설정 후

 

** 컴포넌트 태그 사이에 넣은 값을 조회하는 방법

   function 컴포넌트명( { children } ) {
   return (
       <div>
           { children }
       </div>
       )
   }

 

[예] 컴포넌트 태그 사이에 넣은 값을 조회하는 방법을 사용하지 않을 경우

[예] 컴포넌트 태그 사이에 넣은 값을 조회하는 방법을 사용한 경우

 

** 조건부 렌더링

 : 특정 조건에 따라 다른 결과물을 렌더링하는 것을 의미

 

** src/app.jsx

import React from 'react';
import Hello from './component/hello';
import Wrapper from './component/wrapper';

import './app.css';


function App() {
  const name = 'apple';

  const style = {
    backgroundColor: 'deepskyblue',
    color: 'white',
    fontSize: 40,
    padding: '1rem'
  }

  return (
    <>
    { /* CSS를 적용하는 방법 : className 속성에 적용 */ }
      <Wrapper>
      <div style={style}>Hello!</div>
      <div className="deeppink-box">{name}</div>
      <Hello name="apple" color="gold" isSpecial={true}/>
      <Hello name="banana" color="yellowgreen"/>
      <Hello/>
      </Wrapper>
    </>
  );
}

export default App;

 

** /src/component/hello.jsx

import React from 'react';

// function Hello(props) {
//     { /* props : props.color, props.name => props = {color:'gold', name='김사과'} */ }
//     return <div style={{color: props.color}}>안녕하세요 {props.name}</div>
// }
function Hello({color, name, isSpecial}) {
    return (
        <div style={{ color }}>
            {/* { isSpecial ? <b>★</b> : null } 안녕하세요 { name } */}
            { isSpecial && <b>★</b> } 안녕하세요 { name }
        </div>
    )
}

Hello.defaultProps = {
    color: 'pink',
    name: '무명'
}

export default Hello;

 

** /src/component/wapper.jsx

import React from 'react';

function Wrapper( {children} ) {
    const style = {
        border:'3px solid red',
        padding: '10px'
    };
    return (
        <div style={style}>
            { children }
        </div>
    )
}

export default Wrapper;

 

 

2. useState

 : 리액트에서 값의 상태를 관리하는 Hooks이다.
   리액트 16.8버전부터 Hooks라는 기능이 도입되면서 함수 컴포넌트에서도 상태를 관리할 수 있게 되었다.

 

** 컴포넌트를 만드는 방법

class	function
상태 관리(O)	상태 관리 (X) → 리액트 16.8버전부터 가능하게 됨

 

1) Hooks 사용 예시

** app.jsx

import React from 'react';
import Counter from './component/counter';

function App() {
  return (
    <div>
      <Counter/>
    </div>
  );
}

export default App;

 

** /component/counter.jsx

import React, { useState } from 'react';    // 리액트 패키지에서 useState라는 hooks를 불러옴

function Counter() {

    const [number, setNumber] = useState(0);

    const plus = () => {
        setNumber(number + 1);
        console.log('1 더해졌어요');
    }
    const minus = () => {
        setNumber(number - 1);
        console.log('1 뺐어요');
    }

    return (
        <div>
            <h2>{number}</h2>
            <button onClick={plus}>더하기</button>
            <button onClick={minus}>빼기</button>
        </div>
    )

}

export default Counter;

 

 

2) Input을 추가한 Hooks 사용 예시

** app.jsx

import React from 'react';
// import Counter from './component/counter';
import Input from './component/input';

function App() {
  return (
    <div>
      {/* <Counter/> */}
      <Input/>
    </div>
  );
}

export default App;

 

** /component/input.jsx

import React, { useState } from 'react';

function Input() {

    const [text, setText] = useState('')

    const onChange = (e) => {
        setText(e.target.value);
    };
    const onReset = () => {
        setText('');
    }

    return (
        <div>
            <input onChange={onChange} value={text}/>
            <button onClick={onReset}>지우기</button>
            <div>
                <b>값 : {text}</b>
            </div>
        </div>
    )
}

export default Input;

 

 

3) 멀티 input

** app.jsx

import React from 'react';
// import Counter from './component/counter';
// import Input from './component/input';
import MultiInput from './component/multiinput';

function App() {
  return (
    <div>
      {/* <Counter/> */}
      {/* <Input/> */}
      <MultiInput/>
    </div>
  );
}

export default App;

 

** /component/multiinput.jsx

import React, {useState} from 'react';

function MultiInput() {

    const [inputs, setInputs] = useState({
        userid: '',
        name: ''
    });

    const {userid, name} = inputs;      // 비구조화 할당을 통해 값을 전달

    const onChange = (e) => {
        const {value, name} = e.target; // e.target에서 name과 value 가져옴
        setInputs({
            ...inputs,                  // ... spread 문법 : 객체를 복사
            [name]: value               // name 키를 가진 값을 value로 설정
        });
    };
    const onReset = () => {
        setInputs({
            userid: '',
            name: ''
        })
    };

    return (
        <div>
            <input name="userid" onChange={onChange} placeholder="아이디" value={userid}/>
            <input name="name" onChange={onChange} placeholder="이름" value={name}/>
            <button onClick={onReset}>지우기</button>
            <div>
                <b>아이디 : {userid}</b>, <b>이름 : {name}</b>
            </div>
        </div>
    )
}

export default MultiInput;

 

 

 

3. spread.js

const dog = {
    name: '루시'
};

// const cuteDog = {
//     name: '루시',
//     attribute: 'cute'
// };

// const whiteCuteDog = {
//     name: '루시',
//     attribute: 'cute',
//     color: 'white'
// }

// console.log(dog);
// console.log(cuteDog);
// console.log(whiteCuteDog);


// 기존 객체를 사용하면서 수정하지 않은 상태로 새로운 객체를 만들어내는 방법
const cuteDog = {
    ...dog,
    attribute: 'cute'
};

const whiteCuteDog = {
    ...cuteDog,
    color:'white'
};

console.log(dog);
console.log(cuteDog);
console.log(whiteCuteDog);

 

 

 

4. 불변성을 지켜주어야만 리액트 컴포넌트에서 상태가 업데이트가 됬음을 감지할 수 있고
   이에 따라 필요한 리렌더링이 진행된다.

   inputs[name] = value 이런식으로 기존 상태를 직접 수정하게 되면,
   값이 바뀌어도 리랜더링이 일어나지 않는다.

 

 

5. useRef로 특정 DOM 선택하기
 : 리액트에서 DOM에 직접 접근하는 방법을 사용하기 위해 useRef라는 Hooks를 사용한다.

 

** /component/multiinput.jsx

import React, {useState, useRef} from 'react';

function MultiInput() {

    const [inputs, setInputs] = useState({
        userid: '',
        name: ''
    });

    const useridInput = useRef();

    const {userid, name} = inputs;      // 비구조화 할당을 통해 값을 전달

    const onChange = (e) => {
        const {value, name} = e.target; // e.target에서 name과 value 가져옴
        setInputs({
            ...inputs,                  // ... spread 문법 : 객체를 복사
            [name]: value               // name 키를 가진 값을 value로 설정
        });
    };
    const onReset = () => {
        setInputs({
            userid: '',
            name: ''
        });
        useridInput.current.focus();
    };

    return (
        <div>
            <input name="userid" onChange={onChange} placeholder="아이디" value={userid} ref={useridInput}/>
            <input name="name" onChange={onChange} placeholder="이름" value={name}/>
            <button onClick={onReset}>지우기</button>
            <div>
                <b>아이디 : {userid}</b>, <b>이름 : {name}</b>
            </div>
        </div>
    )
}

export default MultiInput;

 

 

 

6. 배열

** /component/userlist.jsx

import React from 'react';

function UserList() {
    const users = [
        {
            id: 1,
            username: '김사과',
            email: 'apple@apple.com'
        },
        {
            id: 2,
            username: '오랜지',
            email: 'orange@orange.com'
        },
        {
            id: 3,
            username: '반하나',
            email: 'banana@banana.com'
        },
        {
            id: 4,
            username: '이메론',
            email: 'melon@melon.com'
        },
        {
            id: 5,
            username: '배애리',
            email: 'berry@berry.com'
        }
    ];

    return (
        <div>
            <div>
                <b>{users[0].username}</b> <span>({users[0].email})</span>
            </div>
            <div>
                <b>{users[1].username}</b> <span>({users[1].email})</span>
            </div>
            <div>
                <b>{users[2].username}</b> <span>({users[2].email})</span>
            </div>
            <div>
                <b>{users[3].username}</b> <span>({users[3].email})</span>
            </div>
            <div>
                <b>{users[4].username}</b> <span>({users[4].email})</span>
            </div>
        </div>
    )
}

export default UserList;

 

** 위의 /component/userlist.jsx 코드 간략화

import React from 'react';

function User({user}) {
    return (
        <div>
            <b>{user.username}</b> <span>({user.email})</span>
        </div>
    )
}

function UserList() {
    const users = [
        {
            id: 1,
            username: '김사과',
            email: 'apple@apple.com'
        },
        {
            id: 2,
            username: '오랜지',
            email: 'orange@orange.com'
        },
        {
            id: 3,
            username: '반하나',
            email: 'banana@banana.com'
        },
        {
            id: 4,
            username: '이메론',
            email: 'melon@melon.com'
        },
        {
            id: 5,
            username: '배애리',
            email: 'berry@berry.com'
        }
    ];

    return (
        <div>
            {/* <div>
                <User user={users[0]}/>
            </div>
            <div>
                <User user={users[1]}/>
            </div>
            <div>
                <User user={users[2]}/>
            </div>
            <div>
                <User user={users[3]}/>
            </div>
            <div>
                <User user={users[4]}/>
            </div> */}

            {users.map((user, index) => (
                <User user={user} key={index}/>
            ))}
        </div>
    )
}

export default UserList;

 

** app.jsx

import React from 'react';
// import Counter from './component/counter';
// import Input from './component/input';
// import MultiInput from './component/multiinput';
import UserList from './component/userlist'

function App() {
  return (
    <div>
      {/* <Counter/> */}
      {/* <Input/> */}
      {/* <MultiInput/> */}
      <UserList/>
    </div>
  );
}

export default App;