리액트 - preventDefault, useState, useEffect, React.Fragment 등...

참고출처

https://www.youtube.com/playlist?list=PLB7CpjPWqHOuf62H44TMkMIsqfkIzcEcX

 

preventDefault :

prevnetDefault() : form 고유의 동작을 멈추게 해준다.
ex) event => { event.preventDefault();}

 

useState :

useState :
import {useState} from 'react';

function App() {
    const [username, setUsername] = useState('');
}

 

useEffect : 

  업데이트가 일어날 때 실행한다.

useEffet(() => {}, [비어 있음 ? 아무거나 업데이트 될때마다 Hook실행 : 여기 있는 변수들이 업데이트 될때만 Hook 실행])


import {useEffect} from "react";

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

	//버튼 -> increament() -> setCount로 count변수 업데이트 -> useEffect 훅 실행
    useEffect(() => {
        console.log(count);
    }, [count]);
    
    useEffect(() => {
        console.log('first rendering');
    }, []);
    
    //count의 값을 ++
    const increment = () => {
        setCount(count + 1);
    }

    return (
        <div className="App">
        	//클릭시 increament()
            <button onClick={increment}>Click</button>
        </div>
    );
}

export default App;

 

props : 

  부모 컴포넌트 ➡️ 자식 컴포넌트로 데이터 전달

  ⏺️ 부모에서 전달한 Props를 자식에서 받을 때, (props) 대신 ({propsChild})로 props 안에 있는 객체를 직접 받을 수      있다.  

App.js...
import React, {useState} from "react";
import Counter from "./components/Counter";

function App() {
    const [buttonName, setButtonName] = useState('클릭');
    return (
        <div className="App">
            <h1>가나다라</h1>
            //Counter 뒤 click= ~ 이부분이 자식 컴포넌트로 전달됨.
            <Counter click="click1"></Counter>
            <Counter click={buttonName}></Counter>
            <Counter ></Counter>
        </div>
    );
}

export default App;

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

// 부모에서 전달한 props
const Counter = (props) => {
    const [count, setCount] = useState(0);

    const increment = () => {
        setCount(count + 1);
    };
	
    //자식 컴포넌트에서는 props.~으로 받는다!
    // || 연산자는 ➡️ 방향으로 가장 먼저 나오는 false(0)가 아닌값을 출력한다.
    const clickString = props.click || 'Click';  
    // 만약 5행에서 (props) 대신 ({click})으로 받았을 경우,
    // const clickString = click || 'Click'; 으로 쓸 수 있다.
    return (
        <button onClick={increment}>{clickString} {count}</button>
    );

};

export default  Counter;

 

map :

const name_number = [
	{name: 'a' , num: 1},
    {name: 'b' , num: 2},
    {name: 'c' , num: 3},
];

const nameNumberRender = name_number.map(one => {
	return (
    	<div key= {one.name}>
        	<div> {one.name} </div>
            <div> {one.num } </div>
        </div>
    );
});

 

구조분해할당 :

  감싸고 있는 컨테이너를 벗겨준다. 

//구조분해할당 전,
a = ['a', 'b']
b = [a[0], a[1], 'c']

=> b: ['a', 'b', 'c']

//구조분해할당 후,
a = ['a', 'b']
b = [...a, 'c']  // ...a : 구조분해할당

=> b: ['a', 'b', 'c']

 

filter : 

filter( item => {필터 조건})
예를 들어, return item.x !== 1 >>> item.x !== 1의 조건을 만족하는 item만 return 한다. 

코지코더님의 예제,
a = [{id: 1}, {id: 2}];
a.filter( v => {
	return v.id !==1;	
});

console.log(a) >>> [{id: 2}]

 

React.Fragment :

  리액트의 컴포넌트들은 컨테이너로 감싸줘야한다. 이때, input 컴포넌트의 경우, Form태그 안에 들어가는 경우가 많은데, React.Fragment 태그로 감싸주면, 컨테이너 태그 없이 바로 Form 태그 안으로 쏙 들어간다.

return (
        <React.Fragment>
            <input
                type={type}
                value={value}
                placeholder={placeholder}
                onChange={onChange}
            /> <br />
            <div style={{color: 'red'}}>{errorMessage}</div>
        </React.Fragment>
);

<React.Fragment> ... </React.Fragment> 
대신
<> ... </> 으로 축약해 써줘도 된다.