react setStatus 와 괄호의 역할, 점연사자 화살표 함수 에 관하여

setStatus

 

React 에서 상태를 업데이트 하는 함수로 이 함수는 status 값을 새로운 값으로 설정


```js
const onSearchButtonClickHandler = () => {
  if (!status) {
    setStatus(!status);
    return;
  }
};
```
- if (!ststus)
- !status 는 부정 연산자(not)를 의미 하며 status가 false 일 경우 true로 반환 되고, status가 true일 경우 false로 변환 됩니다.
- if (!status) 는 status 가 false 일 때만 실행 됩니다.
- status가 false 라면 !status는 true가 되고 조건문이 true로 평가 되어 그 안의 코드가 실행 됨
- 만약 status가 true 라면 !status 는 false 가 되고 조건문이 false로 평가 되어 그 안의 코드가 실행 되지 않습니다.
```js
let status = false;

if (!status) {  // status가 false이면 조건이 true
  console.log("status는 false입니다.");
}

status = true;

if (!status) {  // status가 true이면 조건이 false
  console.log("이 코드는 실행되지 않습니다.");
}

```
결론 : status 가 false 일 때만 조건 문이 실행 되는 구조 입니다.

 

 

⬛ map 함수
.map() 은 배열(array)의 각 요소를 하나씩 가져와서 특정 작업을 수행한 후, 새로운 배열을 만들어 반환 하는 함 수
```js
const numbers = [1, 2, 3];

const doubled = numbers.map((num) => num * 2)
console.log(doubled); // [2, 4, 6]
```
🏴 numbers.map((num) => num * 2)
->  배열 [1, 2, 3] 에서 각 숫자(num)를 * 2 해서 새 배열 [2, 4, 6]을 생성

 

⬛ (점) 연산자
. 점 은 객체(object)에서 속성(값)을 꺼내어 사용 할때 이용하는 연산자.
```js
const person = {
name: "홍길동"
age: 25
}

console.log(person.name); // "홍길동"
console.log(person.age); // 25

 

⬛ => (화살표 함수)
=>는 함수를 선언 하는 방법 중 하나 입니다.
- 기존 방식 (function 키워드 사용)
```js
function add(a,b) {
return a + b;
}
console.log(add(3,4)); // 7
```
- 화살표 함수 방식
```js
const add =(a, b) => a + b;
console.log(add(3,4)); // 7
```
- 괄호 {} 를 사용 하는 경우
```js
const add =(a, b) => {
return a + b;
}
```

⬛ () => { ... }
ES6(ECMAScript 2015) 문법 기존의 **function 표현식**을 더 간결하게 만들기 위해 사용돼.

```jsx
  //     event handler: 검색 버튼 클릭 이벤트 처리 함수     //

    const onSearchButtonClickHandler = () => {
      if (!status) {
        setStatus(!status);
        return;
      }
    };
```
- 설명
- 코드의 역할은 검색 버튼을 클릭 했을 때 상태 (status)를 변경 하는 것 
- 한 번만 변경하고, 이후에는 더 이 상 바뀌지 않도록 함