반응형
StateReview1.jsx
import React, { useState } from 'react';
const StateReview1 = () => {
// 상태변수 : 값이 변하면 컴포넌트를 리랜더링하는 변수
const [str, setStr] = useState(''); // 구조분해 할당을 이용
// 상태변수로 배열 선언
const [strList, setStrList] = useState([]);
// 배열 사용 연습
const tempList = ['aaa', 'bbb', 'ccc', 'ddd'];
// 배열.map( (item, index) => {} )
// - 매개변수에 작성된 함수에서 반환된 값을 이용해
// 새로운 배열을 만드는 배열 메서드
// - 향상된 for문 처럼 배열 요소 순차접근
// - item : 요소를 하나씩 저장하는 변수
// - index : 현재 인덱스
const temp2 = tempList.map( (item, index) => {
return `${index} : ${item}`; // 0 : aaa
});
console.log(tempList);
console.log(temp2);
/**
* input에 입력된 값을 화면에 그대로 출력
* @param {*} e : 이벤트 객체(발생한 이벤트 관련 정보가 담긴 객체)
*/
const inputStringHandler = (e) => {
// 상태변수 str 값을 입력된 값으로 변경
setStr(e.target.value);
}
/**
* 엔터가 입력된 경우 수행할 함수
* @param {*} e : 이벤트 객체(어떤 키가 입력 되었는지 포함)
*/
const enterHandler = (e) => {
// console.log(e.key);
if(e.key === 'Enter'){ // 엔터 키가 입력된 경우
e.target.value = ''; // input에 작성된 값 삭제
setStr(''); // 상태 변수에 '' 대입
// -> 상태 변수 값 변경 시 리랜더링
}
StateReview1 함수를 선언해, 구조분해할당을 이용한다.
상태변수로 useState 배열을 선언하고
배열사용 연습을 한 후
temp2로 새로 변수를 선언하고 엔터키가 입력된 경우
input에 작성된 값을 삭제하고
setStr 상태변수에 대입해 리랜더링을 해준다.
}
return(
<div>
<h2>State 복습 1</h2>
<div>
<label htmlFor="inputString">문자열 입력 :</label>
<input
type="text"
id="inputString"
onChange={inputStringHandler}
onKeyUp={enterHandler}
/>
</div>
{/* 위 input에 입력된 값이 출력됨 */}
<h3> 입력된 값 : {str}</h3>
<button>초기화</button>
<ul>
{/* <li>문자열 입력 후 엔터 입력 시 ul 태그에 누적</li>
{tempList.map( (item, index) => {
return(
<li>{index} : {item}</li>
);
})} */}
</ul>
</div>
);
}
export default StateReview1;
input 타입으로는 text, id는 inputSting 으로 주고
onChange에 inputStringHandler 를 주고
onKeyUp 로 enterHandler 를 준다.
전개 연산자
* 전개 연산자(...)
- 배열 또는 객체의 가장 바깥쪽 괄호를 푸는 연산자
- 배열 : 요소 추가, 복사, 배열 병합
- 객체 : 복사, 병합, 속성덮어쓰기(객체 값 중 일부만 변경)
- ex)
const temp = [1,2,3];
...temp // 1,2,3 <- 괄호가 없어진 모양
const obj = {"name":홍길동, "age":20}
...obj // "name":홍길동, "age":20
[React.]createContext() 함수 : Context 객체 생성
import React, {createContext} from 'react';
const Context 변수명 = createContext(); // Context 객체 생성
UserContent.jsx
import React, {createContext} from 'react'
/* Context 객체를 어디서든 사용할 수 있게
별도 파일에 생성 후 export
-> 필요한 파일에서 import해서 사용
*/
const userContext = createContext();
export default userContext;
Child.jsx
import React, { useState, useContext } from 'react';
/* 외부에 존재하는 Context 파일 가져오기 */
import UserContext from './UserContext';
/* 자식 컴포넌트 정의 */
const Child = () => {
// Context로 전달받은 부모의 상태변수 얻어오기 // 구조분해할당
const {userList, setUserList} = useContext(UserContext);
// 자식 컴포넌트에서만 사용할 상태변수 선언
const [inputName, setInputName] = useState('');
const [inputAge, setInputAge] = useState('');
/* 추가버튼 클릭 시
부모상태변수 userList에 입력값을 추가하는 함수 */
const addUser = () => {
// 입력값을 이용해서 객체생성
const user = {"name" : inputName, "age" : inputAge};
// 부모의 상태변수 userList를 깊은복사 + user 추가
const newUserList = [...userList, user];
// 새 배열을 부모 상태변수에 대입
setUserList(newUserList);
// 자식 상태변수 빈칸으로 초기화
setInputAge('');
setInputName('');
}
return(
<div>
<label htmlFor='inputName'>이름 입력 :</label>
<input
type="text"
id="inputName"
onChange={ (e) => { setInputName(e.target.value)}}
value={inputName}
/>
<br />
<label htmlFor='inputName'>나이 입력 :</label>
<input
type="number"
id="inputAge"
onChange={ (e) => { setInputAge(e.target.value)}}
value={inputAge}
/>
<button onClick={addUser}>추가</button>
</div>
);
}
export default Child;
Parent.jsx
import React, { useState } from 'react';
/* 외부에 존재하는 Context 가져오기 */
import userContext from './UserContext';
/* 외부에 존재하는 Child 컴포넌트 가져오기 */
import Child from './Child';
/* 부모 컴포넌트 정의 */
const Parent = () => {
/* 상태변수로 배열 선언 */
const [userList, setUserList] = useState([]);
return(
/* Context 객체에
{"userList":userList, "setUserList":setUserList}
값을 제공할 수 있도록 대입
*/
<userContext.Provider value={ { userList, setUserList } }>
<Child/>
{/* Child에서 입력값이 추가될 때마다
부모에서 이를 출력하는 코드작성*/}
<table border="1">
<thead>
<tr>
<th>순서</th>
<th>이름</th>
<th>나이</th>
</tr>
</thead>
<tbody>
{userList.map ((user, index) => {
return(
<tr key={index}>
<td>{index + 1}</td>
<td>{user.name}</td>
<td>{user.age}</td>
</tr>
)
} )}
</tbody>
</table>
</userContext.Provider>
);
}
export default Parent;
반응형