[React]react 첫걸음

사용자 인터페이스를 만들기 위한
자바스크립트 라이브러리

 

리액트(virtual DOM)
메모리에 가상으로 존재하는 DOM

 

자바스크립트 대표 라이브러리
리액트, 뷰, 앵귤러


리액트 장점

• 컴퍼넌트 단위 개발(생상성 향상, 유지보수 용이) /
  (자바스크립트의 클래스를 배웠을때 파일 하나씩 쪼개서 사용해본적 있음)
• 싱글페이지 어플리케이션(사용자 경험 개선)
• 높은 인지도
• 브라우저DOM보다 훨씬 속도 빠름

 

JSX구문  중요!!!!!

• 닫혀야 하는 태그(태그는 꼭 닫혀야 합니다.)
• 하나의 태그로 감싸져 있어야 함.(</>,<></>)
• jsx안에 자바스크립트 값사용은 {}감싼다.
• class지정은 classname속성을 사용
• 주석 {/*주석 */}

 

상태 state 

props : 컴포넌트에게 값 전달하기

 

props는 object객체임

ex)

<Hello name="green" age="30"/>
{name: "green", age: "30"}
function Hello(props){
    {props.name}
    {props.age}
}

 

조건부렌더링

JSX구문은 if문 사용 불가능!!!!!! 삼항연산자만 사용!!!

 

실습.

파일명: Apps.js

import './App.css';
import Hello from './components/Hello';
import Wrapper from './components/Wrapper';
 
 
function App() {
  return (
    <div className="App">
    <Wrapper> //<Wrapper> <<컴퍼넌트 명
         <Hello name="green" message="안녕" isSpecial={true}/>  //값 설정 생략시 true임
         <Hello name="blue" message="반가워" isSpecial={true}/>
         <Hello name="Yellow" message="재미있어" isSpecial={false}/>
         <Hello name="red" message="굿굿"/>
         <Hello message="하하하 이름 기본값으로 저장"/>
     </Wrapper>
    </div>
  );
}
 
export default App;

hello.js 파일에서 .defaultProps  name기본값을 지정해주었다

그래서 3번째 hello props에 name값을 적지 않고 message값만 주었음

 

props.defaultProps 는 props를 따로 지정해주지 않아도 기본값으로 전달해줌

 

파일명: Wrapper.js

import React from 'react';
 
const Wrapper = ({children}) => {
    return (
        <div>
            <h2>childern을 배워봅시다</h2>
            {children}
        </div>
    );
};
 
export default Wrapper;

children메소드은 태그와 태그 사이의 모든 내용을 표시하기 위해 사용한 props

 

파일명: Hello.js

import React from 'react';
 
function Hello({name, message, isSpecial}){
    return (//여러줄일때는 소괄호 감싸기
    <> 
        //let {name} = props 구조분해할당함
        <div className='hello'>
            {isSpecial ? <b>* </b> : null}  //조건부렌더링 if문 사용 불가능 삼항연산자 사용
{/* &&연산자를 사용하면 false일때 값을 안줘도 됨 */}

            {name}님 안녕하세요 {message}</div>  //자바스크립트 변수는 중괄호로 묶어주기
        <p>재미있는 리액트</p>
    </>
    )
}
//기본값 설정
Hello.defaultProps = {
    name: "이름"
}
 
export default Hello;

---

리액트 작업하면서 필요한 확장 플로그인 설치!!!

명령어 rsc 사용하면 import값, 화살표함수, export값 자동 생성함!!!!!

 

import React from 'react';
 
const 화살표함수 = () => {//자바스크립트작성
  return (
    <div>
    //props작성
    </div>
  );
};
 
export default 화살표함수;

---

 

!!click 이벤트를 사용하여 +1 -1씩 올리고 내리기 실습!!

그 전에 자바스크립트 이벤트 작성 방법 3가지

1) dom.addEventListener("이벤트", function(){})

2) <button onclick="함수이름()"> +1</button>

3) dom.on이벤트명 = function(){}

   ex) button.onclick = function(){}

 

**상태 관리하기

react useState함수!!!!!!
컴포넌트에서 동적인 값을 상태라고 합니다. (상태 state - 동적인값)
리액트에 useState함수를 사용하여 state를 관리합니다.

 

useState(초기값)
▶배열을 리턴

 

useState(0) => [newstate, setState()]
해석 ==> useState를 하면 배열을 줌. 0번째는 상태, 1번째는 업데이트해주는 함수

 

APP.js

import './App.css';
import Counter from './components/Counter';
 
 
function App() {
  return (
    <div className="App">
      <Counter/>
    </div>
  );
}
 
export default App;

출력

 

실습2

input 상태 관리하기(input 가 1개일때)

 

APP.js

 import './App.css';
 
 
import InputSample from './components/InputSample';
 
function App() {
  return (
    <div className="App">
      <InputSample/>
    </div>
  );
}
 
export default App;

 

InputSample.js

import React,{useState} from 'react';
 
const InputSample = () => {
    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>
                <span >값: {text}</span>
            </div>
        </div>
    );
};

실습3

input 상태 관리하기(input 가 2개일때)

 

InputSample.js  //App.js 위와 동일

import React,{useState} from 'react';
 
const InputSample = () => {
    const [inputs, setInputs] = useState({
        username:'',
        usernickname:''
    });
    //구조분해 할당
    const {username, usernickname} = inputs;
    const onChange = (e) =>{
        console.log(e);
        const {value, name} = e.target;
        setInputs({
            ...inputs,
            [name]: value//키명을 바꾸고 싶을 땐 []사용
        })
    }
    const onReset = () => {
        console.log(111)
        setInputs({
            username: '',
            usernickname: ''
        });
    }
    return (
        <div>
            <input name="username" onChange={onChange} value={username}/>
            <input name="usernickname" onChange={onChange} value={usernickname}/>
            <button onClick={onReset}>초기화</button>
            <div>
                <span >값: {username},{usernickname}</span>
            </div>
        </div>
    );
};
export default InputSample;

출력값