시작

오늘은 프로젝트를 진행하면서 배운 React 와 JavaSript에 대한 포스팅 입니다 😁

프로젝트에서 사용되는 JavaScript 함수는 모두 화살표 함수로 사용하였습니다 !

JavaScript

1. 변수 선언 방식

ES6 부터 도입된 let, const 에 대해서 알아 보도록 하겠습니다.

let,const 모두 변수를 선언하는 방식이며 Block-level-scope를 따릅니다.

Block-level-scope

모든 코드블럭( 함수, if문 , for문 , try-catch문 등) 내에서 선언된 변수는 해당 코드 블럭내에서만 유효하고
해당 코드블럭 밖에서는 참조 할수없다. 코드 블럭내에서만 유효한 지역변수를 만들게 된다.

const 와 let 의 차이점은 const 는 immutable 입니다.
즉, const 는 재할당이 불가능한 상수 이다.

const A = 'Hello';
A = 'Hi'; // Error;

let B = 'Hello';
B = 'This is let';
console.log(B); // 'This is let'

ES6 이전에는 var 을 사용 하였는데 let,const 차이점

console.log(name); // undefined
var name;

console.log(name_2); // References Error 발생
let name_2;

var로 선언된 변수를 변수 선언 이전에 호출하여도 undefined가 출력된다.

변수 사용시
변수 사용시 const로 일단 선언하고 , 재 할당이 필요한 변수일경우
let 변수로 바꿔서 사용하는게 제일 안전합니다.

2. Array

JavaScript에서 사용하는 Array(배열) 에 대해 알아보도록 하겠습니다.

Array의 선언은 기본적으로 [ ] 사용하여 사용합니다. [ ] 안에
Array Data들을 담아주면 됩니다.

const array = [ 1,2,3,4,5 ];

array.push(6);
console.log(array); // [ 1,2,3,4,5,6 ]

array.pop();
console.log(array); // [ 1,2,3,4,5 ]

array.lenth // 5

push() 를 사용하여 Array의 맨뒤에 데이터를 추가 할수있고, pop()을 사용하여 Array의 맨뒤 데이터를 삭제할수 있습니다.

push() 는 Array.lenth 를 반환해주고 pop()은 삭제되는 Data를 반환해줍니다.

Array , String 형변환
Array <-----> String 서로 간의 형변환이 가능합니다 !

Array to String

const array = [ '형', '변환'];
const string = array.join('');
console.log(string); // '형변환';

Arrary 의 join() 함수를 이용하여 String 형식으로 변환이 가능합니다.

String to Array

const string ='형 변환';
const array = string.split(' ');
console.log(array); // ['형', '변환'];

String 의 split() 함수를 이용하여 Array 형식으로 변환이 가능합니다.
split()의 인자로 tokenize 하고싶은 문자열을 넣으면 문자열 기준으로 잘라서 Array 형식으로 반환해주게 됩니다.

자주 사용하는 유용한 Array Method

Map

Map method 는 배열내의 모든 요소 각각에 대하여 주어진 함수를 실행하고 새로운 결과로 배열을 만들어 반환해 줍니다.

const array = [1,2,3,4,5];
const map_array = array.map((data)=> {
	return data+1;
	}
);
console.log(map_array); // [2,3,4,5,6];

Filter

filter method 는 배열내의 모든 요소 각각에 대하여 주어진 함수를 만족하는 요소로 배열을 만들어 반환해 줍니다.

const array = ['a','b','a','c'];
const filter_array = array.filter((data)=> {
	return data!=='a';
    }
  );
console.log(filter_array); // ['b', 'c'];

React

React에 대한 기초와 , React-Hooks 의 기초를 학습한 내용을 정리 한 것 입니다.

1. useState

React-Hook useState 를 사용하여 React에서 상태관리를 하는 방법에 대해서 알아보도록 하겠습니다..!

먼저, 기존 변수를 선언 해주는 것에서 부터 시작합니다!
useState 를 사용하기 위해서는
import { useState } from 'react' import 해주도록 합니다 !

기존 > const state = 초기값;
useState > const [state, setState] = useState(초기값);
setState 를 통해서 state값 을 변경 할 수 있습니다 !

import { useState } from 'react';

const App = () => {
	const [ value , setValue ] = useState(0);
    
	return (
    	<div>
       		<button onClick={()=>{setValue(value+1);}}>+</button>
        	<span>{value}</span>
        </div>
   	);
}

버튼을 누를때마다 value 값이 1씩 증가하는것을 확인 할 수 있습니다.
이렇게 useState 를 사용 하면 state 값 이 변화 하는걸 감지하여 해당 state 만 렌더링을 다시 해줍니다 !

useState 배열 값 추가하기
state변수가 배열인 경우 값을 추가하는 방법을 알아 보겠습니다.

일반적으로 setState 로 배열을 넣어주면 될거 같은데 예제로 보겠습니다 ㅎㅎ

import { useState } from 'react';

const App = () => {
	const [ value , setValue ] = useState([1,2,3]);
    
	return (
    	<div>
        	<button onClick={()=>{
            		const newArray = value;
                   	newArray.push(4);
                   	setValue(newArray);
            	}}>add</button>
                
           	<span>{value}</span>
        </div>
   	);
}

버튼을 클릭해도 span으로 보여지는 value 값이 제대로 변화하지않습니다...!
그렇다면 어떤식으로 사용해야 할가요?

import { useState } from 'react';

const App = () => {
	const [ value , setValue ] = useState([1,2,3]);
    
	return (
    	<div>
        	<button onClick={()=>{
            		const newArray = [...value];
                   	newArray.push(4);
                   	setValue(newArray);
            	}}>add</button>
                
           	<span>{value}</span>
        </div>
   	);
}

이렇게 state 변수를 대입 해줄때 [...state] 식으로 써주면 되는데
[...{변수}] 를 해주게되면 구조 분해 할당(Destructuring) , Deep Copy가 되게 됩니다.

버튼을 누르게 되면 정상적으로 state의 변화를 감지해 span값이 변하는걸 볼 수 있습니다.

useState 를 사용 하실때 꼭 주의해 주세요 !

2. useEffect

다음은 React-Hook 의 uesEffect 입니다.
useEffect 는 화면이 모든 렌더링 완료 될 때 마다 실행됩니다 !
그리고 특정 값이 변화하는것만 감지하여 실행되게 할 수도 있습니다.

useState 예제에 useEffect를 추가 해 보겠습니다 !

import { useState, useEffect } from 'react';

const App = () => {
	const [ value , setValue ] = useState(0);
    
   	useEffect(()=> {
   		console.log('useEffect 실행');
  	},[]);
    
	return (
    	<div>
        	<button onClick={()=>{setValue(value+1);}}>state변화</button>
            <span>{value}</span>
        </div>
   	);
}

버튼을 클릭 할 때마다 log가 찍히는 걸 확인 할 수 있습니다.
다음은 원하는 변화만 감지 해 봅시다.

import { useState, useEffect } from 'react';

const App = () => {
	const [ value , setValue ] = useState(0);
   	const [ foo , setFoo ] = useState(0);
    
   	useEffect(()=> {
   		console.log('value Effect');
  	},[value]);
    
   	useEffect(()=> {
   		console.log('foo Effect');
  	},[foo]);
    
	return (
    	<div>
        	<button onClick={()=>{setValue(value+1);}}>value+</button>
           	<button onClick={()=>{setFoo(foo+1);}}>foo+</button>
        </div>
   	);
}

useEffect 의 deps 배열에 변화를 감지하려는 state를 넣어주시면 됩니다.
그럼 해당 버튼을 누를때마다 각 변화에 맞는 Effect가 실행되어 log가 찍힐는걸 보실 수 있습니다.

3. Component Props 전달

부모 Component에서 자식 Conponent로 Props를 통해 데이터를 전달 하는 방법을 알아 보겠습니다.

부모 Component A 에서 result라는 변수를 자식 Component B에서 사용 해보도록 하겠습니다.

const A = () => {
    const [result, setResult] = useState(0);

    const addResult = () => {
        setResult(result+1);
    }

    return (
      <div>
          <B result={result}/>
          <button onClick={addResult}>+</button>
      </div>
    );
}

const B = ({result}) => {
    return (
        <div>
            <span>{result}</span>
        </div>
    )
}

<B result={result}/> 이렇게 컴포넌트를 사용할때 key=value 형식으로 props 을 넘겨주시면 key를 이용해서 변수를 사용 하실 수 있습니다 !

4. useState 를 활용한 input 만들기

사용자에게 input을 입력받는 경우가 많은데, 이 때 state를 이용해서
사용자의 입력을 받아보도록 하겠습니다.

input의 onChange를 이용하여 state를 변화 시켜주고 value 속성을 이용해서 내가 입력한 state를 보여주는 그런 방식입니다!

const App = () => {
  const [userID,setUserID] = useState('');
  const [password,setPassword] = useState('');

  const onSubmit= (event) => { // event 가 항상 argument 로 넘어온다
    event.preventDefault(); // submit 시 웹페이지가 리로딩 되는걸 막아줌
    console.log(userID, password);
  }

  return (
    <div className="App">
      <form onSubmit={ onSubmit}>
        <input onChange={(e) => {setUserID(e.target.value)}} placeholder="userID" value={userID}/><br/>
        <input onChange={(e) => {setPassword(e.target.value)}} placeholder="password" value={password}/><br/>
        <button type="submit">로그인</button>{/* type : submit -> submit 역할 , button -> submit x , button 의 역할만 */}
      </form>
    </div>
  );
}

버튼을 누르게되면 사용자가 입력한 대로 log가 나오게 됩니다.
input 의 value 에는 null 값이 오지 못하기 때문에 기본값을 ''로 설정해 줍니다.

5.Map을 이용한 반복 줄이기

배열의 Method map() 을 이용해서 반복되는 작업을 줄여 보도록 하겠습니다.

서버에서 사용자 정보나, 각종 정보를 받아오게 되면 똑같은 폼을 그대로 사용하고 데이터만 바뀌게 되는데 map 을 이용해서 간편하게 만들 수 있습니다.

const App = () => {
    const users = [
        { id : 1, name : '철수', age : 21},
        { id : 2, name : '영희', age : 22},
        { id : 3, name : '민수', age : 23},
    ]

    const renderUsers = users.map(user=> {
        return (
            <div className="user" key={user.id}>
                <div className="user-name">{user.name}</div>
                <div className="user-age">{user.age}</div>
            </div>
        )
    })
    return (
        <div className="App">
            <h1>User List</h1>
            {renderUsers}
        </div>
    );
}

만약 map을 사용하지 않는다면 , 코드의 길이가 길어지겠죠? 그리고
데이터의 양이 늘어나면 날수록 엄청난 반복의 작업이 됩니다.

그리고 map을 사용하여 rendering 해줄 때에는 key값을 넣어줘야 합니다.
key 값은 겹치지 않는 unique 한 값으로 해주시면 됩니다.

끝

프로젝트를 진행하면서 학습했던 내용을 정리해서 포스팅 하려고하니깐
다른 멋진 포스팅들 처럼 작성은 어렵네요..!

이렇게 정리해서 포스팅하니 복습을 하게되어 좋은거 같아요.👋