react

const[변수,함수]=useSate, event.target,...스프레드 연산자, some연산자

campanula 2023. 8. 16. 12:15

const[state(값을 담을 변수), setState(변수값을 바꿔주는 함수)] = useState(초기값);

 

test1파일

const [movies, setMovies] = useState([
    {id:1, title:'Movie 1', genre:'Drama', release_date:'2022-01-01'},
    {id: 2, title: 'Movie 2', genre:'Action', release_date:'2022-02-01'},
    {id: 3, title:'Movie 3', genre:'Comedy', release_date: '2022-03-01'}
  ]);

movies: 값을 담을 변수

setMovies: 변수값을 바꿔주는 함수

[
    {id:1, title:'Movie 1', genre:'Drama', release_date:'2022-01-01'},
    {id: 2, title: 'Movie 2', genre:'Action', release_date:'2022-02-01'},
    {id: 3, title:'Movie 3', genre:'Comedy', release_date: '2022-03-01'}
  ]

: 초기값 배열

 

const{name, nickname}=state;은

const name = state.name;

const nickname= state.nickname이랑 같음

object에 있는 값을 바로 변수 할당

state안에 이미 name이랑 nickname이라는 변수가 있어서 변수선언

state를 console.log(state)해보면 {name:"홍길동",nickname:"홍아무개"}로 출력

 

const handleInputChange = (event) => {
const { name, value } = event.target;
setNewMovie({ ...newMovie, [name]: value });
};

객체 안에서 key를 [ ]로 감싸면 그 안에 넣은 레퍼런스가 가리키는 실제 값이 key 값으로 사용된다.

name이 key값

event.target은 함수를 전달하는 요소를 의미
const name = event.target.name
어떤 입력event.target에 handlChange를 전달하면 handleChange 함수를 전달한 곳에서 target이 입력됩니다.
 

스프레드 연산자(...): 기존 배열 객체의 값을 그대로 복사해와서 사용할 수 있는 연산자

const subject1=["국어", "영어", "수학"]

const subject2=["사회","과학"]

 

const subject=[...subject1, ...subject2]

console.log(subject)

["국어", "영어", "수학","사회","과학"]

 

some() 메서드는 배열한의 어떤 요소라도 주어진 판별 함수를 적어도 하나라도 통과하는지 테스트

배열 변경X

 

값이 배열 내 존재하는지 확인

 

const fruits = ["apple", "banana", "mango", "guava"];

function checkAvailability(arr, val) {
  return arr.some((arrVal) => val === arrVal);
}

checkAvailability(fruits, "kela"); // false
checkAvailability(fruits, "banana"); // true

https://developer.mozilla.org/ko/