시작
오늘은 프로젝트를 진행하면서 배운 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 // 5push() 를 사용하여 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 한 값으로 해주시면 됩니다.
끝
프로젝트를 진행하면서 학습했던 내용을 정리해서 포스팅 하려고하니깐
다른 멋진 포스팅들 처럼 작성은 어렵네요..!
이렇게 정리해서 포스팅하니 복습을 하게되어 좋은거 같아요.👋
