cool_kim.log

[자바스크립트/Javascript] 렉시컬 스코프

Sat, 31 Jul 2021 13:49:49 GMT

📌 스코프가 작동하는 두가지 방식

렉시컬 스코프
동적 스코프

💡 렉스 타임

렉시컬 스코프 : 개발자가 코드를 짤 때 변수와 스코프 블록을 어디서 작성하는가에 기초하여 렉서가 처리할 때 확정

//1
function foo() {
    //2
    var b = a * 2;
    function bar(c); {
        //3
        console.log( a, b, c);
    }
    bar( b * 3 )'
}
foo( 2 ); // 2, 4, 12

⇒ 3개의 중첩 스코프

1 : 글로벌 스코프, foo 확인자
2 : foo 스코프, a, bar, b 확인자
3 : bar 스코프, c 확인자

📍 어떤 함수의 버블도 동시에 다른 두 스코프 버블 안에 존재할 수 없음

✅ 검색

: 엔진이 스코프 버블의 구조와 상대적 위치를 통해 어디를 검색해야하는지에 대한 정보

📍 스코프 : 목표와 일치하는 대상을 찾는 즉시 검색 중단 📍 섀도잉 : 여러 중첩 스코프 층에 걸쳐 같은 확인자 이름 정의 📍 렉시컬 스코프는 함수가 선언된 위치에 따라 정의

✅ 렉시컬 속이기

eval()

: 인자로 문자열을 받아 런타임에 문자열 내용을 코드의 일부분처럼 처리 → 호출된 위치에 있는 렉시컬 스코프 수정

with

: 한 객체의 여러 속성을 참조할 때 객체 참조를 매번 반복하지 않기 위해 사용하는 속기법

function foo(obj) {
    with (obj) {
        a=2;
    }
}

var o1 = {
    a: 2
};

var o2 = {
    b: 3
};

foo( o1 );
console.log( o1.a ); //2

foo( o2 );
console.log( o2.a ); // undefined
console.log( a ); // 2--0ops, leaked global!

⇒ with 문은 o1이라는 스코프를 선언하고 그 스코프는 o1.a 속성에 해당하는 확인자를 가짐

⚠️ eval과 with모두 권장하지 않는 문이다 하지만 코드에 이 두개가 있다면 최적화 없이는 코드가 느리게 동작할거 라는 것 명심!

[React] 리덕스

Wed, 28 Jul 2021 10:23:45 GMT

📌리덕스

: 컴포넌트 코드로부터 상태관리 코드를 분리 가능 : 미들웨어 활용한 다양한 기능 추가 가능 - 강력한 미들웨어 라이브러리 (redux-saga) - 로컬 스토리지에 데이터 저장하기 및 불러오기 : SSR시 데이터 전달 간편 : 리액트 콘텍스트보다 효율적인 렌더링 가능

context API

import React, { userContext, createContext, useReducer } from 'react';

// 컨텍스트
const AppContext = createContext({});
const DispatchContext = createContext(() => {});

// 루트 컴포넌트
export default function App() {
  const [state, dispatch] = useReducer(reducer, INITIAL_STATE);
  return(
    <>
      
        
          
          
        
      
    
  );
}

// 리듀서
const INITIAL_STATE = {
  user: {name: 'mike'},
  produce: {name: 'iphone'},
}
function reducer(state, action) {
  switch (action.type) {
    case 'setUserName':
      return {
        ...state, 
        user: {...state.user, name: action.name}};
            default:
                return state;
  }
}

하나의 context로 관리하게 되면 상태값이 하나만 바뀌어도 모두 다 렌더링 됨

리덕스

뷰에서 상태값을 변경하고 싶을 때 액션 발생
미들웨어가 액션 처리
리듀서에서 해당 액션에 의해 상태값이 변경되어 출력
스토어가 새로운 상태값을 저장
옵저버에게 데이터의 변경 사실을 알려 뷰 바꾸기

📍 뷰 → 액션 → 미들웨어 → 리듀서 → 스토어 → 뷰

✅ 액션

dispatch : 리액트에서 액션이 발생했다는 것을 리덕스에게 알려주는 함수

//일반적이지 않은 예
store.dispatch({ type: 'todo/ADD', title: '영화 보기', priority: 'high' });
store.dispatch({ type: 'todo/REMOVE', id: 123 });
store.dispatch({ type: 'todo/REMOVE_ALL' });

//일반적인 예
function addTodo({ title, priority }) {
    return { type: 'todo/ADD', title, priority };
}
store.dispatch(addTodo({ title: '영화 보기', priority: 'high' }));

✔️ type 속성값 : 액션 구분해줌 → 유니크 해야함 - 상수 변수로 만드는 것이 좋음 ✔️ action creator : 각 액션 구조를 일관성 있게 만들기 위함

✅ 미들웨어

const myMiddleware = store => next => action => next(action);

⇒ 미들웨어의 모양

📍 상태값을 가져오는 코드

const printLog = store => next => action => {
  console.log(`prev state = ${JSON.stringify(store.getState())}`);
  const result = next(action);
  console.log(`next state = ${JSON.stringify(store.getState())}`);
  return result;
}

📍딜레이 후에 리듀서가 실행되게 하는 코드

const delayAction = store => next => action => {
    const delay = action.meta?.delay;
    if(!delay) {
        return next(action);
    }
    const timoutId = setTimeout(() => next(action), delay);
    return function cancel() {
        clearTimout(timeoutId);
    };
};

const myReducer - [state = {name: 'mike' }, action} => {
    console.log('myReducer');
    if(action.type === 'someAction') {
        return { name: 'mike2' };
    }
    return state;
};

const store = createStore(myReducer, applyMiddleware(delayAction)};
const cancle = store.dispatch({type: 'someAction', meta: {delay: 3000 }});
cancel();

export default function App() {
    return 실전 리액트;
}

📍 로컬 스토리지에 저장해주는 코드

const saveToLocalStorage = store => next => action => {
  if (action.meta?.localStorageKey) {
    localStorage.setItem(action.meta?.loaclStorageKey, JSON.stringify(action));
  }
  return next(action);
}

const myReducer = (state = { name: 'mike' }, action) => {
  console.log('myReducer');
  switch(action.type) {
    case 'someAction':
      return {...state, name:'mike2'}
    default:
      return state;
  }
  return state;
}

const store = createStore(myReducer, applyMiddleware(saveToLocalStorage));

store.dispatch({ 
  type: 'someAction',
  title: 'asdf',
  meta: { localStorageKey: 'myKey' } 
});

✅ 리듀서

: 액션이 발생했을 때 새로운 상태값을 만드는 함수 상태값 변경 → 액션 객체와 함께 dispatch 메소드 호출

function reducer(state = INITIAL_STATE, action) {
//...
  switch (action.type) {
    case REMOVE_ALL:
      return {
        ...state,
        todos: [],
      };
    case REMOVE:
      return {
        ...state,
        todos: state.todos.filter(todo => todo.id !== action.id),
      };
    default:
      return state;
  }
}

const INITIAL_STATE = { todos: [] }

⚠️ 반환되는 state 값은 불변객체로 관리 해야함 ⇒ 이전 상태랑 다음 상태를 === 로 단순 비교가 가능함

📌 immer패키지 : 전개 연산자 대신 불변객체로 관리해주는 라이브러리

import produce from 'immer';

const person = { name: 'mike', age: 22 };
const newPerson = produce(person, draft => {
  draft.age = 32
})

//다른 파일내의 코드
function reducer(state = INITIAL_STATE, action) {
  return produce(state, draft => {
    switch (action.type) {
      case SET_SELECTED_PEOPLE:
        draft.selectedPeople = draft.peopleList.find(
          item => item.id === action.id,
        );
        break;
      case EDIT_PEOPLE_NAME:
        const people = draft.peopleList.find(
          item => item.id === action.id,
        );
        people.name = action.name;
        break;
    }
  })
}

⚠️ 리듀서 코드 작성시 주의해야할 점

객체를 가르킬 시 객체의 레퍼런스가 아닌 고유한 아이디 값 이용
리듀서는 순수 함수로 작성해야함(입력이 같을 때 같은 출력을 해야함, 부수효과 없어야 함)

🔸 리듀서 생성함수

📍createReducer사용

import produce from 'immer';

function createReducer(initialState, handlerMap) {
  return function(state = initialState, action) {
    return produce(state, draft => {
      const handler = handlerMap[action.type];
      if (handler) {
        handler(draft, action);
      }
    })
  }
}

const reducer = createReducer(INITIAL_STATE, {
  [ADD]: (state, action) => state.todos.push(action.todo),
  [REMOVE_ALL]: state => (state.todos = []),
  [REMOVE]: (state, action) => state.todos.filter(todo => todo.id !== action.id),
});

🔸 스토어 생성

📍createStore사용

const store = createStore(reducer);

let prevState;
store.subscribe(() => {
  const state = store.getState();
  if (state === prevState) {
    console.log('상태값 같음');
  } else {
    console.log('상태값 변경됨');
  }
  prevState = state;
});

[자바스크립트/Javascript] 문법(2), 스코프 이해하기

Fri, 23 Jul 2021 15:45:35 GMT

5-2 문법

5. 함수 인자

디폴트 인자

: 함수에 인자를 넘기지 않거나 undefined를 전달했을 때 적용

undefined받았을 때
- arguments배열에도 값이 undefined인 원소가 추가
아무것도 넘기지 않았을 때
- arguments 배열에 원소가 하나도 없음

📍 요즘은 arguments 대신에 레스트인자( ...) 을 많이 쓰는 추세

6. try ... finally

📍 try이후에는 catch, finally 중 하나만 필수! (하지만 둘다 같이 써도 상관 없음)

🔹 finally : 어떤일이 있어도 반드시 실행되는 코드

finally 절에서 예외가 던져지면 이전의 실행 결과는 모두 무시 ( continue, break와 같은 비선형 제어문도 비슷하게 작동)

function foo() {
    try {
        return 42;
    }
    finally {
        console.log( "Hello" );
    }
    console.log( "실행될 리 없지!" );
}

console.log( foo() );
//Hello
//42

for (var i = 0; i<10; i++) {
    try {
        continue;
    }
    finally {
        console.log( i );
    }
}
// 0 1 2 3 4 5 6 7 8 9

⇒ continue문 때문에 console.log(i)문은 루프 순회 끝 부분에서 실행, ⇒ 그러나 i++ 로 인덱스가 수정되기 직전까지 꾸준히 실행되므로 0—9가 콘솔창에 표시

📍 finally절의 return은 그 이전에 실행된 try나 catch 절의 return을 덮어쓰는 특출한 능력이 있음. (단, 반드시 명시적으로 return문을 써야함)

7. switch

switch 표현식과 case 표현식 간의 매치 과정은 === 알고리즘과 똑같음 ⇒ 강제변환이 일어나는 동등 비교 ==를 이용할 때 논리 연산자 주의

분명히 표현식의 결과가 true/false로 떨어지게 작성해야함

var a = 10;

switch (a) {
    case 1:
    case 2:
        //절대 들어오지 않음
    default:
        console.log("default");
    case 3:
        console.log("3")
    case 4:
        console.log("4");
}
//default
//3

6장 스코프

1. 컴파일러 이론

자바스크립트 : 컴파일러 언어

토크나이징/렉싱

: 문자열을 나누어 토큰이라는 의미 있는 조각으로 만드는 과정 var a = 2; 를 토큰으로 나누면 ⇒ var, a, =, 2, ; 로 나뉘게 됨 (빈칸은 의미가 있느냐 없느냐에 따라 포함될 때가 있고 안될 때가 있음)

파싱

: 토큰 배열을 프로그램의 문법 구조를 반영하여 중첩 원소를 갖는 트리 형태로 바꾸는 과정

📍 AST : 파싱의 결과로 만들어진 트리

최상위 노드 : 변수선언 (var a=2)
자식 노드 : 확인자(a), 대입 수식
대입 수식노드의 자식노드 : 숫자 리터럴 (2)

코드 생성

: AST를 컴포터에서 실행 코드로 바꾸는 과정

2. 스코프 이해하기

1) 출연진

엔진 : 컴파일레이션의 시작부터 끝까지 전 과정과 자바스크립트 프로그램 실행을 책임
컴파일러 : 엔진의 친구로, 파싱과 코드 생성의 모든 잡일을 함
엔진의 또 다른 친구로, 선언된 모든 확인자 검색 목록을 작성하고 유지한다. 또한 엄격한 규칙을 강제하여 현재 실행 콛에서 확인자의 적용 방식을 정함

2) 앞과 뒤

var a=2에 엔진이 어떻게 접근할까?

컴파일러가 렉싱을 통해 구문을 토큰으로 쪼갬
토큰을 파싱해 트리 구조를 만듬
컴파일러가 var a를 만나면 스코프에게 변수 a가 특정한 스코프 컬렉션 안에 있는지 물음
변수 a가 이미 있다면 컴파일러는 선언 무시 그렇지 않으면 새로운 변수 a를 스코프 컬렉션 내에 선언하라고 요청
a=2 대입문을 처리하기 위해 나중에 엔진이 실행할 수 있는 코드 생성
엔진이 실행하는 코드는 먼저 스코프에게 a라 부르는 변수가 현재 스코프 컬렉션 내에서 접근할 수 있는지 확인
가능하면 엔진은 변수 a를 사용, 아니면 엔진은 다른 곳을 살핌

3) 컴파일러체

LHS검색 : 변수가 대입 연산자의 왼쪽에 있을 때 수행
- 값을 넣어야 하므로 변수 컨테이너 자체를 찾음
- a = 2
RHS검색 : 변수가 대입 연산자의 오른쪽에 있을 때 수행
- 특정 변수의 값을 찾는 것과 다를 바 없음
- console.log(a)

📍 LHS검색과 RHS검색 모두 수행

function foo(a) {
    console.log( a ); //2
{
foo( a );

마지막 줄에서 foo()함수를 호출하는 데 RHS검색
코드 속에 내재된 a=2 가 LHS검색

3. 중첩 스코프

중첩 스코프 탐사 시 사용하는 규칙

엔진은 현재 스코프에서 변수를 찾기 시작하고, 찾지 못하면 한 단계씩 올라감
최상위 글로벌 스코프에 도달하면 변수를 찾았든, 못 찾았든 검색을 멈춤

4. 오류

RHS검색이 중첩 스코프 안 어디에서도 변수를 찾을 수 없으면 ReferenceError 발생
RHS검색이 변수를 찾았지만 그 값을 가지고 불가능한 일을 할 경우 TypeError 발생
LHS검색을 수행해 변수를 찾지 못하고 최상위 층에 도착할 때 → 새로운 변수 생성

[React] useEffect활용, 렌더링 최적화

Sun, 18 Jul 2021 16:37:38 GMT

📌 useEffect 활용하기

function Profile({userId}) {
    const [user, setUser] = useState();
    useEffect(() => {
        fetchUser(userId).then(data => setUser(data));
    }, [userId]);
}

⇒ 마운트 된 후 한번만 호출할 수 있도록 useEffect 의존성 배열에 빈배열 입력할 수 있지만 좋은 방법 ❌ ⇒ userId가 바뀔때 렌더링 할 수 있도록 의존성 배열에 userId를 입력해 줘야함

💡 마운트 되었을 때만 실행되게 하려면 별도의 훅을 사용하는 것이 더 좋음

function Profile({ userId }) {
  const [user, setUser] = useState();
  useOnMounted(() => fetchUser(userId).then(data => setUser(data)))
}

💡 useEffect에서 async await함수를 사용하고 싶을 때 (async await함수는 Promise객체를 반환하기 때문에 useEffect에서 사용할 수 없음. useEffect는 함수만 반환 가능)

function Profile({ userId }) {
    const [user, setUser] = useState();
    useEffect(() => {
        async function fetchAndSetUser(needDetail) {
            const data = await fetchUser(userId, needDetail);
            setUser(data);
    }
    fetchAndSetUser(false);
}, [userId]);

⇒ 위 코드에서 userId가 변경될 때만 useEffect함수가 렌더 되게 하려면 useCallback훅 사용

✔️ 의존성 배열은 되도록 사용하지 않는것이 좋음(∴ 관리하는데에 많은 시간과 노력 필요)

💡 여러 상태값을 참조하면서 값 변경할 때 → useReducer훅 사용

function Timer({ initialTotalSeconds }) {
  const [state, dispatch] = useReducer(reducer, {
    hour: initialTotalSeconds / 3600
    minute: (initialTotalSeconds % 3600) / 60
    second: initialTotalSeconds % 60
  });
  const { hour, minute, second } = state;
  useEffect(() => {
    const id = setInterval(dispatch, 1000);
    return () => clearInterval(id);
  });
  //...
}

function reducer(state) {
  const { hour, minute, second } = state;
  if(second) {
    return { ..state, second: second - 1 };
  } else if(second) {
    return { ..state, minute: minute - 1, second: 59 };
  } else if(second) {
    return { ..state, hour: hour - 1, minute: 59, second: 59 };
  } else {
    return state;
  }
}

→ dispatch함수는 변경되지 않는 값이므로 의존성 배열에 입력하지 않아도 됨

💡 의존성 배열을 관리하는데에 마땅한 해결책이 생각나지 않는 경우 → useRef 훅 사용

function MyComponent({ onClick }) {
  const onClickRef = useRef();

  // concurrent mode를 위한 작성법
  useEffect(() => {
    onClickRef.current = onClick;
  });

  useEffect(() => {
    window.addEventListener('click', () => {
      onClickRef.current();
      // ...
    })
    // ...
  });
  // ...
}

→ ref객체는 컴포넌트 안에서 직접 수정하면 안됨! (concurrent mode 때문)

📌 렌더링 속도 올리는 최적화 방법

리액트의 대부분의 연산 : 컴포넌트 함수의 실행 & 가상돔에서 발생

📍 React.memo사용시 memo로 감싼 컴포넌트에 두번째 인자로 비교함수를 넣어주면 그 값을 토대로 돔에 반영함

function MyComponent(props) {
  // ...
}
function isEqual(prefProps, nextProps) {
  // true 또는 false를 반환
}
React.memo(MyComponent, isEqual)

(두번째 인자로 비교 연산을 하지 않아도 되지만 넣어주면 렌더링 속도가 빨라짐)

❓ 이전 값과 현재값이 다르다는 것을 어떻게 비교 ➡️ === 연산자로 비교! (객체를 불변 객체로 관리) prevProps.todos === nextProps.todos

속성값 관리

💡 useCallback훅 사용

//...
const onChangeFruit = useCallback(fruit => {
    setSelectedFruit(fruit);
    sendLog({ type: 'fruit change', value: fruit });
}, []);
//...

속성값이 변경되어야 하는데 변경하지 않는 경우

💡상태값의 레퍼런스가 변경되지 않기 때문 ⇒ 상태값을 불변객체로 관리 해야함

[자바스크립트/Javascript] 문법(1)

Sat, 17 Jul 2021 16:01:58 GMT

5.1 문과 표현식

🔹 문(Statement) 🔹 표현식(Expression)

단일한, 특정한 결괏값으로 계산

✔️ 모든 문은 완료 값(Completion Value)을 가진다 ✔️ 표현식의 부수효과

증가, 감소 연산자를 후위 연산자로 사용시
delete함수
할당 표현식 ( = )

콘텍스트 규칙

1) 중괄호

객체 리터럴 var a = { foo: bar() };
레이블 { foo: bar() } ➕ 레이블 점프 : continue & break

2) 블록

[] + {}; //"[object Object]"
{} + []; // 0

윗 줄에서 엔진은 + 연산자 표현식의 {}를 실제 값으로 해석 → []는 " " 로 강제 변환 → "[object Object]" 로 강제변환
아랫 줄의 {}는 동떨어진 빈 블록으로 간주 → + [] 표현식에서 명시적으로 [] 를 숫자 0으로 강제변환

3) 객체 분해

: 객체 분해 시 { } 사용

function getData() {
    // ...
    return {
        a: 42,
        b: "foo"
    };
}

var { a, b } = getData();
console.log( a, b ); // 42 "foo"

4) else if와 선택적 블록

📍 자바스크립트 문법에 else if같은 것은 없음 정확한 문법은 다음과 같음

if(a) {
    //...
}
else {
    if (b) {
        //...
    }
    else {
        //...
    }
}

5.2 연산자 우선순위

var a = 42, b;
b = ( a++, a );
a; // 43
b; // 43

var a = 42, b;
b = a++, a;
a; // 43
b; //42

💡 , 연산자가 = 연산자보다 우선순위가 낮아서 값이 달라짐

if(str && (matches = str.match( /[aeiou]/g ))) {
    //...
}

💡 &&가 =보다 우선순위가 높으므로 ()로 묶지 않으면 달라짐

true || false && false; //true

(true || false) && false; // false
true || (false && false); // true

💡 좌측 → 우측 연산이라고 생각하지만 &&가 || 보다 우선하여 처리됨!!

단락 평가

: &&, || 연산자는 좌측 피연산자의 평가 결과만으로 전체 결과가 이미 결정될 경우 우측 피연산자의 평가를 건너뜀 ex) a && b 에서 a가 falsy면 b는 쳐다보지 않음

📌 && > || > ? : 순으로 우선순위 높음

결합성

대부분 좌측 결합성을 가지지만 예외 연산자가 있음

? : : 우측 결합성을 가짐
= : 우측 결합성을 가짐

💡 정확히 하고자 () 로 그룹핑해주면 햇갈일 일 없다!

5.3 세미콜론 자동 삽입

ASI : 자바스크립트 프로그램의 세미콜론이 누락된 곳에 엔진이 자동으로 ;를 삽입

💡 break, continue, return, yield 키워드에서 활약

5.4 에러

: 자바스크립트에는 하위 에러 타입 뿐만 아니라 일부 에러는 컴파일 시점에 발생하도록 문법적으로 정의되어 있음

📍 정규 표현식 리터럴 내부의 구문

var a = /+foo/; //에러

📍 식별자가 아닌 것에 할당

var a;
42 = a; //에러

📍 엄격 모드에서 함수 인자명 중복

function foo(a, b, a) {} //정상실행
function bar(a, b, a) { "use strict"; } //에러

📍 동일한 이름의 프로퍼티가 여러개 있는 객체 리터럴

(function() {
    "use strict";
    var a = {
        b: 42,
        b: 43
    }; //에러
})();

💡 임시 데드 존(TDZ) : 아직 초기화를 하지 않아 변수를 참조할 수 없는 코드 영역

a = 2; //ReferenceError
let a;

[React] 리액트 코드 작성법

Thu, 15 Jul 2021 16:38:07 GMT

효율적인 컴포넌트 파일 작성

//가장 상단에 속성값의 타입 정의
MyComponenet.propTypes = {
    //...객체입력
}

//컴포넌트 학수 작성 시 함수에 이름을 부여해주어야함
//컴포넌트 매개변수는 명명된 매개변수 문법으로 작성
export default function MyComponent({ prop1, prop2 }) {
    //...
}

const COLUMNES = [
    { id: 1, name: 'phoneNumber', width: 2100, color: "white" },
    { id: 1, name: 'city', width: 100, color: "grey" },
    //...
];

const URL_PRODUCT_LIST = '/api/products';
function getTotalPrice({ price, total }) {
    //...
}

🔹 가장 상단에 속성값 타입 정의 : 컴포넌트 사용 시 속성값을 입력해야함. 편리할 수 있도록 가장 상단에 적어주는 것이 좋음 🔹 함수 이름 정의 : 이름 정의 하지 않으면 리액트 개발자 도구에서 디버깅이 힘듬 🔹 명명된 매개변수 문법으로 작성 : 불필요한 코드 발생 🔹 컴포넌트 밖의 변수와 함수는 파일 가장 밑에 정의 🔹 외부 변수 명은 대문자로 작성 : 변하지 않는 값이라는 걸 시각적으로 보여줌 🔹 매우 큰 객체 생성은 컴포넌트 밖에서 처리하는 것이 좋음

📍 컴포넌트 내부에서 서로 연관된 코드는 한 곳으로 모아 관리하는 것이 좋음 ⇒ useState 따로 모으고 useEffect모으고 보다는 관련된 훅끼리 묶어 작성 ⇒ 커스텀 훅으로 분리할 때도 편함

속성값 타입 정의: prop-types

User.propTypes = {
    male : PropTypes.bool.isRequired,
    age: PropTypes.number,
    type: PropTypes.oneOf(['gold', 'silver', 'bronze']),
    onChangeName: PropTypes.func,
    onChangeTitle: PropTypes.func.isRequired,
};

🔹 isRequired : 필수값 🔹 oneOf : 입력해 준 값 중에 하나만 받을 수 있음

🔺 함수의 매개변수, 반환값에 대한 타입 정보 정의할 수 없음

주석으로 자세한 타입 적어주기!

MyComponent.propTypes = {
    menu: PropTypes.element,
    description: PropTypes.node,
    message: PropTypes.instanceOf(Message),
    name: PropTypes.oneOf(['jone', 'mike']).
    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    ages: PropTypes.arrayOf(PropTypes.number),
    info: PropTypes.shape({
        color: PropTypes.string,
        weight: PropTypes.number,
    }),
    infos: PropTypes.objectOf(PropTypes.number),
}

🔹 element : 리액트 요소 🔹 node : 리액트 요소 뿐 아니라 리액트 컴포넌트가 반환할 수 있는 모든 값 🔹 instanceOf() : 특정 클래스의 객체인지 검사 🔹 oneOfType() : 타입을 배열로 입력 → 입력해 준 값 모두 참 🔹 arrayOf() : 매개변수로 넘겨준 타입으로 이루어진 배열 🔹 shape() : 객체 타입 🔹 objectOf() : 각 속성의 value 타입이 매개변수로 넘겨준 타입이다.

가독성 높이는 조건부 렌더링

//if문 사용
function Greeting({ isLogin, name }) {
    if (isLogin) {
        return {`${anme}님 안녕하세요.`}
    }
}

//삼항 연산자 사용
function GreetingB({ isLogin, name }) {
    return {isLogin ? `${name}님 안녕하세요.` : `권한이 없습니다.`}
}

📍 삼항 연산자를 사용하는게 대부분 좋음

🔹 jsx부분에서 삼항 연산자를 사용하여 특정 부분을 가리고 싶을 때 : && 기호를 쓰면 끝에 null을 붙이지 않아도 됨

재사용성을 고려한 컴포넌트 구분법

관심사의 분리 : 복잡한 코드를 비슷한 기능을 하는 코드끼리 모아 별도로 관리

UI처리 코드 && api호출 코드 && DB 관리 코드 ⇒ 같은 파일에서 관리 x

💡 코드가 복잡해지고 있다! → 관심사의 분리 필요함

🔹 연관된 컴포넌트끼리 폴더를 만들어 관리해야함 🔹 상태값의 중복 : 자식 컴포넌트에서 부모의 데이터를 별도의 상태값으로 관리하는 것은 좋지 않음

상태값은 일부 컴포넌트로 한정하여 관리하는 것이 좋음

🔹 컴포넌트가 비지니스 로직 && 상태값을 가지고 있으면 재사용성 떨어짐

비지니스 로직과 상태값의 유무로 컴포넌트 분리하는 것이 좋음

📌 재사용성이 좋은 컴포넌트 : 비지니스 로직이 없다, 상탯값이 없다.(마우스 오버와 값은 UI 효과를 위한 상태값 제외)

✔️ component 폴더 : 재사용성이 높은 컴포넌트 파일 ✔️ container 폴더 : 재사용성이 낮은 컴포넌트 파일

[자바스크립트/Javascript] 강제변환(2)

Wed, 14 Jul 2021 15:12:07 GMT

4.4 암시적 변환

: 부수 효과가 명확하지 않게 숨겨진 형태로 일어나는 타입변환 📍 불필요한 상세 구현 줄이는게 목표

암시적?

임의의 타입 → Sometype 타입 변환

엄격한 타입 언어의 강제 변환 : 원래 타입 → Another 타입 → Sometype타입
암시적 타입 언어의 강제 변환 : 원래 타입 → Sometype타입
- 지저분한 코드를 감출 수 있음

⚠️ 명시적 강제변환이 물론 좋지만 무조건적으로 암시적 강제변환이 나쁜건 아니다.

문자열 ↔️ 숫자

🔹 + 연산자 : 숫자의 덧셈 or 문자열 접합으로 오버로드 → 어떻게 두개의 연산을 구분?

- 알고리즘은 한쪽 피연산자가 문자열이거나 문자열 표현형으로 나타낼 수 있으면 문자열 붙이기 수행
- ToPrimitive 추상 연산을 수행
- ToPrimitive 는 number 콘텍스트 힌트를 넘겨 [[DefaultValue]] 알고리즘 호출 ⇒ ToNumber 추상 연산이 객체를 다루는 방법과 일치❗
a + "" : 숫자를 문자열로 강제 변환하는 관용코드 (암시적 강제변환임) ⚠️ 평범한 원시 숫자 값이 아닌 개체라면 문자열이 달라질 수 있음

🔹 - 연산자 : 숫자 뺄셈 기능이 전부

a - 0 : a 값을 숫자로 강제변환 → 곱하기, 나누기 연산도 마찬가지
객체 값에 - 연산 : + 연산과 비슷
- 배열은 모두 문자열로 강제변환 뒤 숫자로 강제변환 그후, - 연산

불리언 ➡️ 숫자

👍 복잡한 형태의 불리언 로직을 숫자 덧셈 형태로 단순화 할 때 편리함

🔹 !!arguments[i] : true/false로 강제 변환

true / truthy : 1
false / falsy : 0

* ➡️ 불리언

🔹 if () 문의 조건 표현식 🔹 for ( ; ; ) 에서 두 번째 조건 표현식 🔹 while () 및 do ... while() 루프의 조건 표현식 🔹 ? : 상항 연산 시 첫 번째 조건 표현식 🔹 || 및 && 의 좌측 피연산자

📍 콘텍스트에서 불리언이 아닌 값이 사용되면 일단 불리언 값으로 암시적 강제변환 됨.

`&&` 와 `||` 연산자

💡 자바스크립트에서 두 연산자는 다른 언어와 달리 실제로 결괏값이 논리 값이 아님!! ⇒ && 또는 || 연산자의 결괏값이 반드시 불리언 타입이어야 하는 것은 아니며 항상 두 피연산자 표현식 중 어느 한쪽 값으로 귀결됨

a || b;
a ? a : b; //위와 같은 코드

a && b;
a ? b : a; //위와 같은 코드

⚠️ " " 값은 falsy값임

🔹 || 연산자

falsy값은 무조건 건너 뛸 경우에만 사용해야함
아닐 경우 조건 평가식을 삼항 연산자로 더 명시적으로 지정해야함

🔹 && 연산자

가드 연산자 : 첫번째 피연산자의 평가 결과가 truthy일 때에만 두번째 피연산자 선택

📍 복합 논리 표현식의 작동 방식

복합 표현식 평가 → 불리언으로 암시적 강제 변환

심벌 강제변환

: 심벌 -> 문자열 명시정 강제변환은 👌, 암시적 강제변환은 ❌

🖐️ BUT! 불리언 값으로는 명시적/암시적 모두 강제변환 가능

4.5 느슨한/엄격한 동등 비교

🔹 느슨한 동등 비교 : == ➡️ 강제변환 ⭕

🔹 엄격한 동등 비교 : === ➡️ 강제변환 ❌

📌 강제 변환이 필요하다면 == 필요하지 않다면 === 사용

추상 동등 비교

: == 연산자 로직은 추상적 동등 비교 알고리즘

비교할 두 값이 같은 타입이면 값을 보고 식별
NaN은 그 자신과도 동등하지 않음
+0과 -0은 동등하지 않음

📍 객체의 느슨한 동등 비의 경우 정확히 똑같은 값에 대한 레퍼런스일 경우에만 동등 ➡️ 강제변환 일어나지 않음!

문자열 ➡️ 숫자

var a = 42;
var b = "42";

a === b; // false
a == b; // true

🔹 ===는 강제 변환이 안되므로 false 🔹 == 는 피연산자의 타입이 다르면 비교알고리즘에 의해 피연산자 값이 암시적으로 강제변환되어 true

* ➡️ 불리언

var x = true;
var y = "42";

x == y; //false

Type( x ) 는 불리언이므로 ToNumber(x) → 1 로 강제변환
1 == "42"가 되는데 타입이 다르므로 알고리즘 수행
"42"는 42로 바뀌어 1 == 42 → false가 됨

📍 == true or == false 와 같은 코드는 안쓰는 것이 좋음 === 는 괜찮아요!

null ➡️ undefined

🔹 null과 undefined를 느슨한 동등 비교하면 강제변환 🔹 이 강제변환은 안전하고 예측 가능하며, 어떤 다른 값도 비교 결과 긍정 오류를 할 가능성이 없음

객체 ➡️ 비객체

var a = "abc";
var b = Object( a );

a === b; //false
a == b; //true

var x = null;
var y = Object( x );
x == y; // false

var c = undefined;
var d = Object( c ); 
c == d; //false

var e = NaN;
var f = Object( e );
e == f; //false

b는 ToPrimitive연산으로 "abc"라는 단순 스칼라 원시값으로 강제변환되어 a == b가 true 맞음
a == b 는 true가 맞음
null과 undefined는 객체 래퍼가 따로 없어 박싱할 수 없음
NaN은 해당 객체 래퍼인 Number로 박싱되지만 결국 조건식은 NaN == NaN이 되어 false가 됨

희귀 사례

falsy비교

"0" == false; //true
false == 0; //true
false == ""; //true
false == []; //true
"" == 0; //true
"" == []; //true
0 == []; //true

➡️ 긍정 오류

다양한 오류

[] == ![] //true

2 == [2]; //true
"" == [null]; //true

0 == "\n"; //true

4.6 추상 관계 비교

: a < b 비교 과정

🔹 피연산자 모두 문자열일 때

각 문자를 단순 어휘로 비교(알파벳 순서로)

🔹 그 외의 경우

어느 한쪽이라도 문자열이 아닐 경우 양 쪽 모두 ToNumber로 강제변환하여 비교

📍 자바스크립트 엔진은 <= 를 '더 크지 않은'(!(a > b) → !(b < a))의 의미로 해석

[React] 리액트 context, ref, 훅

Mon, 12 Jul 2021 12:09:41 GMT

리액트 context

하위 컴포넌트가 상위 컴포넌트에서 상당히 멀리 떨어져 있을때 사용

📍 기계적으로 속성값을 전달하는 코드

export default function App() {
    return (
        
            상단 메뉴
            
            하단 메뉴
        
    );
}

function Profile({ usename }) {
    return (
        
            ****
            {/* ... */}
        
    );
}

function Greeting({ username }) {
    return {`${username}님 안녕하세요`};
}

📍 context 사용시

import React, { createContext } from 'react'

const UserContext = createContext('unknown');

export default function App() {
    return (
        
            
                상단 메뉴
                
                하단 메뉴
            
        
    );
}

function Profile({ usename }) {
    return (
        
            ****
            {/* ... */}
        
    );
}

function Greeting({ username }) {
//...이 부분에서 username 사용할 수 없음
//사용 하고 싶으면 다음 코드 작성
    const username = useContext(UserContext);
    return (
                
            {username => {`${username}님 안녕하세요`}}
        
    );
}

✔️ Provider에서 value값을 넘겨 주면 Consumer에서 그 값을 받아 처리 가능

Provider 컴포넌트의 값이 변경 되면 하위 모든 Consumer 컴포넌트 다시 렌더링

👍 데이터의 종류별로 Context를 나누면 렌더링 성능에 좋음

📍 하위 컴포넌트에서 데이터 수정하기

const UserContext = createContext({ username: 'unknown', helloCount: 0 });
const setUserContext = createContext(() => {});

export default fuction App() {
    const [user, setUser] = userState({ username: 'mike', helloCount: 0 });
    return (
      
            
                
                    
                
            
        
    );
}

⚠️ context 사용 시 주의할 점

Provider value값이 변경 되지 않아도 매번 불필요하게 렌더링 될 수 있음
Provider 컴포넌트 밖에서 자식 컴포넌트를 렌더링 되면 상태값이 변하지 않음

ref

: 자식 요소에 직접 접근하기

📍 useRef훅 : 함수형 컴포넌트에서는 사용 불가능

export default function App() {
    const inputRef = useRef();
    useEffect(() => {
        inputRef.current.focus();
    }, []);

    return (
        
            
            
            
        
    );
}

⇒ current 함수는 실제 돔 요소를 가리키게 됨 📍 useImperativeHandel훅 사용하면 함수형 컴포넌트에서도 사용 가능

📍 forwardRef

const Button = React.forwardRef(function ({ onClick }, ref ) {
    return (
        
    );
}

📍 useRef 시용하지 않고 ref속성값에 함수 입력하기 → 이 함수는 해당 요소가 생성되거나 사라질 때 한번 씩 호출

ref={ref => ref && setText(INITIAL_TEXT)}

⚠️ useCallback훅 사용해서 함수 고정시키기

const setInetialText = useCallback(ref => ref && setText(INITIAL_TEXT), []);

📍 접근하고자 하는 돔 요소의 개수가 많을 때

const boxListRef = useRef({});

{BOX_LIST.map(item => {
     {boxListRef.current[item.id] = ref}}
        style={{
            flex: '0 0 auto',
        }}
    >{`box_${iteml.id}`}
))}

⚠️ 조건부 렌더링에 사용된 요소의 ref객체는 current속성을 검사하는 코드 필요

리액트 내장 훅

useState
useEffect
useContext
useRef
- 렌더링과 상관없는 값을 저장할 때 유용하게 사용 (setTimeout)
useMemo
- 메모이제이션 기능 제공
- 계산량이 많은 함수의 반환값을 재활용하는 용도
- const value = useMemo(() => renExpensiceJob(v1, v2), [v1, v2]);
useCallback
- 메모이제이션 기능 제공 ( 함수 메모이제이션에 특화 )
- 불필요하게 렌더링 되는 현상을 막기 위해 사용
- const onSave = useCallback(() => saveToServer(name, age), [name, age])
useReducer
- 여러개의 상태값을 하나의 훅으로 관리
- 반환 값 : 상태값 & dispatch함수
- const [state, dispatch] = useReducer(reducer, INITIAL_STATE);
- context의 Provider를 사용해서 dispatch 함수 내려 보내 줄 수 있음
useImperativeHandle
- 함수가 반환하는 값이 부모의 ref객체가 참조하는 값이 됨
useLayoutEffect
- 부수효과 함수를 동기로 호출 → 렌더링 결과가 돔에 반영된 직후에 바로 호출
- 이 훅 안에서 연산을 많이 하면 브라우저 먹통이 될 수 있음

useDebugValue

리액트 개발자 도구에 좀 더 풍부한 정보 제공 가능(디버깅할 때 편리)

useDebugValue(
  state === STATE_START
      ? 'start'
      : state === STATE_RUNNING
      ? 'running'
      : 'stop',
};

📍결과

[자바스크립트/Javascript] 강제변환(1)

Sun, 11 Jul 2021 16:37:46 GMT

강제변환은 마법? 아니면 사악??

4.1 값변환

강제 변환 : 어떤 값을 다른 타입의 값으로 암시적으로 바꿈 → 강제 변환 시 객체, 함수 같은 합성 값 타입으로 변환될 수 없음

암시적 강제변환 : 다른 작업 도중 불분명한 부수 효과로부터 발생하는 타입 변환
명시적 강제변환 : 의도적인 타입변환

var a = 42;
var b = a + ""; //암시적 강제변환
var c = String( a ); //명시적 강제변환

4.2 추상 연산

ToString

: 문자열이 아닌 값 → 문자열 변환 작업

숫자 숫자 : 문자열 반환 너무 작거나 큰 값 : 지수 형태 문자열로 반환
일반 객체 특별히 지정하지 않으면 기본적으로 내부 [[Class]] 반환 ex) [object Object]
배열 모든 원소 값이 콤마(,)로 분리된 형태로 반롼 ex) "1,2,3"
JSON ✔️ JSON.stringfy() : 어떤 값을 JSON 문자열로 직렬화 → 강제변환과 똑같지 않지만 ToString 규칙과 관련됨
1. JSON 안전 값(JSON으로 확실히 나타낼 수 있는 값)은 모두 JSON.stringfy()로 문자열화 가능
2. JSON 안전 값이 아닌 것들은 자동으로 누락시키며 이런 값이 배열에 들어있으면 null로 바꿈
```
JSON.stringfy( undefined ); //undefined
JSON.stringfy( function(){} ); //undefined

JSON.stringfy(
[1,undefined,function(){},4]
); // "[1,null,null,4]"

JSON.stringfy(
{ a:2, b:function(){} }
); //"{"a":2}"
```

JSON.stringfy()에 환형 참조 객체(프로퍼티 참조가 무한 순환되는 구조의 객체)를 넘기면 에러 발생

JSON.stringfy()의 세번째 인자는 '스페이스' : 들여 쓰기를 할 빈 공간의 개수를 숫자로 지정하거나 문자열을 지정하여 각 들여쓰기 수준에 사용

 var a = {
     b: 42,
     c: "42",
     d: [1,2,3]
 };

 JSON.stringfy( a, null, 3 );
 // "{
 //    "b": 42,
 //    "c": "42",
 //    "d": [
 //       1,
 //       2,
 //       3
 //    ]
 // ]"

 JSON.stringfu( a, null, "-----" );
 // "{
 // -----"b": 42,
 // -----"c": "42",
 // -----"d": [
 // ----------1,
 // ----------2,
 // ----------3
 // -----]
 // }"

✔️ toJSON() : 해당 객체의 JSON 안전 버전 반환 → JSON문자열로 바꾸는 것이 아님

var a = {
    val: [1,2,3],
    toJSON: function() {
        return this.val.slice( 1 );
    }
};

var b = {
    val: [1,2,3],
    toJSON: function(){
        return "[" +
            this.val.slice( 1 ).join() +
        "]";
    }
};

JSON.stringfy(a); // "[2,3]"
JSON.stringfy(b); // ""[2,3]""

var a = {
    val: [1,2,3],
    toJSON: function() {
        return this.val.slice( 1 );
    }
};

var b = {
    val: [1,2,3],
    toJSON: function(){
        return "[" +
            this.val.slice( 1 ).join() +
        "]";
    }
};

JSON.stringfy(a); // "[2,3]"
JSON.stringfy(b); // ""[2,3]""

b는 배열 자체가 아니라 반환된 문자열을 다시 문자열화 함

대체자가 배열
- 전체 원소는 문자열이어야함
- 각 원소는 객체 직렬화의 대상 프로퍼티명
```
var a = {
  b: 42,
  c: "42",
  d: [1,2,3]
};

JSON.stringfy(a, ["b","c"] ); // "b{"b":42,"c":"42"}"
```
대체자가 함수
- 키와 값 두 인자를 전달
- 처음 한 번은 객체 자신, 다음은 각 개체 프로퍼티별로 한번씩 실행
- 직렬화 과정에서 해당 키를 건너뛰려면 undefined, 그외엔 해당 값 반환
```
var a = {
  b: 42,
  c: "42",
  d: [1,2,3]
};

JSON.stringfy( a, function(k,v) {
  if (k !== "c") return v;
});
// "{"b":42,"d":[1,2,3]}"
```

JSON.stringfy()은 직접적인 강제 변환의 형식은 아니지만 두 가지 이유로 ToString 강제 변환과 연관 됨

문자열, 숫자, 불리언, null 값이 JSON으로 문자열화하는 방식은 ToStirng 추상 연산의 규칙에 따라 문자열 값으로 강제변환되는 방식과 동일
JSON.stirngfy()에 전달한 객체가 자체 toJSON()메서드를 갖고 있다면 문자열화 전 toJSON()가 자동 호출되어 JSON 안전 값으로 강제변환 됨

ToNumber

: 숫자 아닌 값 → 수식 연산이 가능한 숫자 변환

true → 1
false → 0
undefined → NaN
null → 0
문자열 → 숫자 리터럴 규칙/구문 or NaN
0이 앞에 붙은 8진수 → 8진수로 처리하지 않음(일반 10진수로 처리
객체(배열) → 동등한 원시 값으로 변환 후 그 결곽값을 ToNumber 규칙에 의해 강제변환
- 추상 연산 과정에서 동등한 원시값으로 바꾸기 위해 valueOf() 메서드를 구현했는지 확인
- 어떻게 해도 원시 값으로 바꿀 수 없을 떄는 TyprError 오류 반환
Object.create(null) : 강제변환이 불가능한 객체 생성

ToBoolean

falsy 값
- undefined
- null
- false
- +0, -0, NaN
- ""
  
  📍 falsy 객체 : 겉보기에는 평범한 객체처럼 작동할 것 같지만 불리언으로 강제변환하면 false
```
var a = new Boolean( false );
var b = new Number( 0 );
var c = new String( "" );

var d = Boolean( a&& b && c );
d; // true
```
truthy 값
- falsy 값 목록에 없는 값

📌 헷갈리지 않으려면 falsy 값을 외워두는 것이 좋음!

명시적 강제 변환

: 분명하고 확실한 타입변환

문자열 ↔ 숫자

: String(), Number() 사용

⚠️ 앞에 new 키워드가 붙지 않기 때문에 객체 래퍼 생성하는 것이 아님

toString()

: 겉보기에는 명시적이지만 암시적인 요소 감춰져 있음

→ 원시값 42에는 toStirng() 메소드가 없으므로 엔진은 toStirng을 자용 할 수 있게 자동으로 42를 객체 래퍼로 '박싱'함
+c

: 단한 연산자로 덧ㅅ겜을 하는게 아니라 피연산자 c를 숫자로 하는 명시적 강제변환
```
  var c = "3.14";
  var d = 5+ +c;
  d; // 8.14
```
⚠️ var d = 5+ +c; 두 부호 사이에 띄어 쓰기를 하지 않으면 증감 연산자가 되어버리니 조심!

날짜 ➡️ 숫자

: + 단항 연산자 사용

var d = new Date( "Mon, 18 Aug 2014 08:53:06 CDT" );
+d; // 1408369986000 (유닉스 타임스탬프 표현형)

📍 현재 시각을 타임스탬프로 바꿀 때 : var timestamp = +new Date(); 📍 강제변환 없이 Date 객체로부터 타임스탬프 얻기

var timestamp = new Date().getTime();
//var timestamp = (new Date()).getTime();
//var timestamp = (new Date).getTime();

var timestamp = Date.now();

틸드(~)

: 보수로 변환

32비트 숫자로 강제 변환
NOT연산

~x 는 -(x+1)과 같음

~42; // -(42+1) ==> -43

✔️ -(x+1)을 0으로 만드는 값은 -1이다. → -1이면 falsy한 0, 그 외에는 truthy한 숫자 값이 산출

📍 여기서 -1과 같은 성질의 값은 '경계값'이라고 함 - 경계값 : 동일 타입의 더 확장된 값의 집합 내에서 임의의 어떤 의미를 부여한 값 ex) indexOf() 에서 인덱스를 발견하지 못했을 경우 -1을 반환

var a = "Hello World";

~a.indexOf( "lo" ); // -4 <-- truthy
if(~a.indexOf( "lo" )) { // true
    //찾음
}

~a.indexOf( "ol" ); // 0 <-- falsy
!~a.indexOf( "ol" ); // 0 <-- true

if(!~a.indexOf( "ol" )) { // true
    //못찾음
}

더블 틸드(~~)

: 숫자의 소수점 이상 부분 잘라내기

맨 앞의 ~는 ToInt32 강제변환을 적용
각 비트를 거꾸로 함
두번째 ~는 비트를 또 한 번 뒤집음
원상태로 되돌림 ⇒ ToInt32 강제변환만 하는 셈

⚠️ 음수에서는 Math.floor()과 결과값이 다름

~~1E20 / 10; //166199296
1E20 | 0 /10; //1661992960 
(1E20 | 0) / 10; //166199296

숫자 형태의 문자열 파싱

: 문자열 → 숫자 강제 변환과 결과가 비슷하지만 비숫자형 문자를 허용함

var a = "42";
var b = "42px";

Number( a ); //42
parseInt( a ); //42

Number( b ); //NaN
parseInt( b ); //42

*→불리언

: 비불리언 → 불리언 강제변환 : Boolean(), !! 로 강제 변환

📍 삼항 연산자

var b = a ? true : false;

✔️삼항 연산자보다 Boolean(a)나 !!a같은 명시적 강제변환이 더 좋음

[React] 리액트 훅

Sat, 10 Jul 2021 12:25:23 GMT

훅

: 컴포넌트에 기능을 추가할 때 사용하는 함수 ex) 컴포넌트에 상탯값 추가 or 자식 요소에 접근

클래스형 컴포넌트보다 장점이 많으며 리액트 팀에서도 훅에 집중함

대표적인 리액트 훅

useState : 상탯값 추가
useEffect : 부수효과 처리(서버 API호출, 이벤트 핸들러 등록 등)

useState

const [count, setCount] = useState(0);

초기값을 넣어 호출
배열 반환 : 첫번째 아이템에는 상태값, 두번째 아이템에는 상태값 변경 함수
상태값 변경 함수는 비동기이면서 배치(batch)로 처리됨
- 만약 동기로 처리되면 하나의 상태값 변경 함수가 호출될 때마다 화면을 다시 그리기 때문에 성능 이슈가 생김
- 상태값 변경 함수를 동기로 처리하고 매번 화면을 다시 그리지 않는다면 UI데이터와 화면간의 불일치가 발생하여 혼란
- 동기로 처리하려면 상태값 변경 함수 안에 함수를 입력 setCount(v => v + 1); → 처리되기 직전의 상태값을 매개변수로 받기 때문에 잘 동작함
- 리액트에서 관리하지 않는 외부에서 호출하는 경우에는 배치로 동작하지 않음 ex) window.addEventListener('click', onclick); → 상태값 변경 함수를 호출할 때마다 렌더링 발생
  - 외부에서 처리 될 때도 배치로 처리되게 하기 → ubstable_batchedUpdates() 사용
```
  function onClick() {
      ReactDOM.unstable_batchedUpdates(() => {
          setCount(v => v + 1);
          setCount(v => v + 1);
      });
  }
```
상태값 변경 함수는 호출한 순서대로 적용됨
여러개의 상태값을 하나의useState로 관리 할 수 있음(객체 이용) const [state, setState] = useState({ name: '', age: 0 }); 상태값 변경 함수를 호출할 때는 전체 객체를 새로 입력해 줘야함 onChange={e => setState({ ...state, name: e.target.value })} 📍 어러 상태값을 관리할 때는 useState보다는 useReducer가 더 적합

useEffect

모든 부수 효과는 useEffect훅에서 처리하는게 좋음

useEffect(() => {
    document.title = `업데이트 횟수: ${count}`;
});

첫번째 매개변수에 함수 작성(부수효과 함수) → 함수는 렌더링 결과가 실제 돔에 반영되고 비동기로 호출

✔️ userId를 속성값으로 받아 api를 호출해 해당 유저의 정보를 가져온 다음, user 상태값을 변경

export default function Profile({ userId }) {
 const [user, setUser] = useState(null);

 //userId가 변경될 때만 부수효과함수 실행
 useEffect(() => {
     getUserApi(userId).then(data => setUser(data));
 }, [userId]);
 return (
     
         {!user && 사용자 정보를 가져오는 중...}
         {user && (
             <>
                 {`name is ${user.name}`}
                 {`age is ${user.age}`}
             
         )}
     
 );
}

const USER1 = { name: "mike", age: 23 }; const USER2 = { name: "jane", age: 31 };

//userId가 홀수일때 USER1리턴 짝수일때 USER2리턴 function getUserApi(userId) { return new Promise[res => { setTimeout(() => { res(userId % 2 ? USER1 : USER2); }, 500); }); }


2. 두번째 매개변수로 배열 입력(**의존성 배열**) 
    - 이 배열에 있는 값이 변경될 때만 부수효과 함수 실행
    - 의존성 배열에 빈배열을 입력하면 부수 효과 함수는 마운트 된 이후에 한번만 호출
    - 부수효과 함수에서 사용한 변수(_컴포넌트의 상태값, 속성값, 컴포넌트 내부에서 정의된 지역변수, 지역함수_)  → 의존성 배열에 작성해 줘야함
    📍 `const [user, setUser] = useState(null);` 의 `setUser` 값(상태값 변경 함수)은 변하지 않기 때문에 배열에 추가 안해도 됨.
    - 의존성 배열의 값이 항상 변경될 때는 useCallback훅을 이용해 메모리에이션 기능 이용
    - 꼭 필요한 경우에만 입력해야함
    

3. 부수효과 함수 반환값
    - useEffect에서 새로운 함수가 반환 될때는 다음 부수효과 함수가 호출되기 직전에 호출 or 컴포넌트가 사라지기(unmount) 직전에 호출 → 적어도 한번은 호출
    


📍 이벤트 핸들러를 등록할 때 useEffect 부수효과 함수로 작성
📍 이벤트 핸들러 해제할 때 useEffect 반환 함수로 작성
```jsx
useEffect(() => {
    window.addEventListener('resize', onResize);
    return() => {
        window.removeEventListener('resize', onResize);
    };
}, []);

커스텀 훅 만들기

훅의 이름은 use로 시작하는 것이 좋음

export default function useUser(userId) {
  const[user, setUser] = userState(null);

  useEffect(() => {
      getUserApi(userId).then(data => setUser(data));
  }, [userId]);
  return user;
}

//사용할때 const user = useUser(userId);

⇒ userId가 변경되면 훅 내부에서 자동으로 api를 호출해서 사용자 데이터 가져올 것

👍 비동기 방식으로 동기 방식처럼 사용 가능!

[React] 리액트 가상돔

Sat, 10 Jul 2021 12:16:11 GMT

가상돔

: 메모리에 가상돔을 올려놓고 이전과 이후의 가상돔 비교하여 변경된 부분만 실제 돔에 반영 : 실제돔을 만들 수 있는 리액트 요소 트리

컴포넌트 리액트 요소

//jsx
function Title({ title, color }) {
    return

cool_kim.log

[자바스크립트/Javascript] 렉시컬 스코프

💡 렉스 타임

✅ 검색

✅ 렉시컬 속이기

eval()

with

[React] 리덕스

📌리덕스

context API

리덕스

✅ 액션

✅ 미들웨어

✅ 리듀서

🔸 리듀서 생성함수

🔸 스토어 생성

[자바스크립트/Javascript] 문법(2), 스코프 이해하기

5-2 문법

5. 함수 인자

디폴트 인자

6. try ... finally

7. switch

6장 스코프

1. 컴파일러 이론

토크나이징/렉싱

파싱

코드 생성

2. 스코프 이해하기

1) 출연진

2) 앞과 뒤

3) 컴파일러체

3. 중첩 스코프

4. 오류

[React] useEffect활용, 렌더링 최적화

📌 useEffect 활용하기

📌 렌더링 속도 올리는 최적화 방법

속성값 관리

속성값이 변경되어야 하는데 변경하지 않는 경우

[자바스크립트/Javascript] 문법(1)

5.1 문과 표현식

콘텍스트 규칙

1) 중괄호

2) 블록

3) 객체 분해

4) else if와 선택적 블록

5.2 연산자 우선순위

단락 평가

결합성

5.3 세미콜론 자동 삽입

5.4 에러

[React] 리액트 코드 작성법

효율적인 컴포넌트 파일 작성

속성값 타입 정의: prop-types

가독성 높이는 조건부 렌더링

재사용성을 고려한 컴포넌트 구분법

[자바스크립트/Javascript] 강제변환(2)

4.4 암시적 변환

암시적?

문자열 ↔️ 숫자

불리언 ➡️ 숫자

* ➡️ 불리언

&& 와 || 연산자

심벌 강제변환

4.5 느슨한/엄격한 동등 비교

추상 동등 비교

문자열 ➡️ 숫자

* ➡️ 불리언

null ➡️ undefined

객체 ➡️ 비객체

희귀 사례

falsy비교

다양한 오류

4.6 추상 관계 비교

[React] 리액트 context, ref, 훅

리액트 context

ref

리액트 내장 훅

[자바스크립트/Javascript] 강제변환(1)

4.1 값변환

4.2 추상 연산

`&&` 와 `||` 연산자