COCSOS - guitar, computer, etc

- var의 문제점 var -> 1. 스코프를 가짐, 함수를 벗어나도 쓸수있다. 2. 정의하지 않아도 사용 가능. 단, 'use strict'=> 정의하지 않으면 사용 불가. 3. for(var i ...) 사용 시 for문 밖에서 쓰는 경우 마지막 i 로 값이 나옴. 4. 즉시 실행 함수로 처리할 수 있지만(함수 안에서만 사용 가능) 번거롭 5. 위에서 정의하지 않아도 끌어올려진다 (hoisting) console.log(v); v = 2; var v = '3'; 6. 재정의 가능 var v = 1; var v = 2; 7. 재할당 제한 기능 미지원 - const와 let var는 함수 스코프 const, let은 블록 스코프. 해당 블록 밖에서 에러난다. 바깥에서 흔히 불리는 지영이, 우리반의 지영이..

* 조건부 렌더링 때에 따라 좋은 코드가 있다. // 여러가지 경우가 있는데, 때에 따라서 적절히 사용하자. function Greeting( {isLogin, name, cash}){ // 1. if문 사용 if (isLogin){ return `${name} 하이` }else{ return 권한이 없소 } // 2. 삼항 연산자 return {isLogin ? `${name} 하이` : '권한이 없소'} // 3-1 null 리턴할 때는 엠퍼센드 && return {isLogin && `${name} 하이`} // 3-2 삼항연산자로는 조금 길다. return {isLogin ? `${name} 하이` : null} // 아래는 그리지 않는다. // {false} // {null} // '' 결과는 ..

* PropTypes에서 속성값 타입을 입력할 수 있다 는것은 무슨 소리란 말이요? import PropTypes from 'prop-types'; User.propTypes = {...}; // prop-types 패키지가 있다. 속성값의 타입정보를 정의할 때 사용하는 리액트 공식 패키지 왜 타입이 필요한가? js는 동적 타입, 실수 등 에러 발생 가능하기 때문. 아래를 보고 한눈에 무슨 타입인지 알고, 코딩할 때 실수안할걸 확신하면 동적 타입 쓰셈. // propTypes가 없는 경우 /** * * 코드를 읽어야 타입을 알 수 있다 * 그러나 읽고나서도 명확하지 않음 */ export default function User({type,age,male,onChangeName,onChangeTitle})..

가독성 생산성을 고려한 컴포넌트 작성법 * 상단에는 속성값의 타입을 정의하기 MyComponent.propTypes = { // ... } -> 속성값 타입정보를 위에 작성하는 이유? 사용자 입장에서 컴포넌트 타입 정보 확인이 편함 (타입스크립트로는 propTypes 정의할 필요는 없다) export default function 함수이름을작성하기(){ return }-> 디버깅 시 함수 이름에서 확인가능 * 컴포넌트 arg는 명명된 매개변수를 넣기 // XXX 번거로움 function f1(props){ props.prop1; props.prop2; } // OOO function f2({prop1, prop2}) { prop1; prop2; } * 컴포넌트의 변수, 함수는 파일 하단에 작성 변수명은 ..

리액트 내장 훅 useState useEffect useContext useRef useMemo, useCallback => 메모이제이션 const timerIdRef = useRef(-1) useEffect(()=> timerIdRef.current = setTimeout(()=>{}, 1000); }); => 타이머는 렌더링과 상관없음 // 불필요하게 state로 관리할 필요가 없으므로 Ref 객체가 적합하다. * useMemo 계산량이 많은 함수를 저장 const value = useMemo(()=> runExpensiveJob(v1,v2), [v1,v2]); useEffect와 마찬가지로 두번째의 배열은 의존성 배열임. v1,v2 값이 변경될때만 runExpensiveJob이 수행된다. impor..

* 자식 요소에 접근이 필요한 경우가 있다. DOM 크기 / 포커스 주기 / 스크롤 위치 => ref 속성값을 쓰면 된다 export default function APp(){ const inputRef = useRef(); useEffect(()=>{ inputRef.current.focus(); },[]); return ( 저장 ) } useEffect-> 렌더링 후에 수행 되기때문에 가능함. 함수형 컴포넌트... useImparativeHandle 함수형 컴포넌트 내부의 변수/함수를 외부에서 호출할 수 있게된다. 어렵다... 지금은 이게 왜필요한지, 무슨 말인지 이해가 안간다.나중에 듣자ㅜㅜ

컴포넌트 사이에 데이터는 어떻게 전달할까? * 상위 컴포넌트에서 하위 컴포넌트를 전달할때 속성값을 사용하는데, 간단하면 속성값도 되지만, 많은 수를 사용한다면, 깊어지면 중간 컴포넌트는 전달하는게 점점 많아짐. 기계적으로 내려준다 -> 이때 context를 사용하자! //usage import React, {createContext} from 'react'; const UserContext = createContext('초기값'); 데이터를 넣을때는 상위 컴포넌트에서 UserContext.Provider value ="mike" 식으로 추가한다. ex) import React, {createContext} from 'react' export default function App(){ return //....

훅 사용 시 반드시 지킬것 1. 하나의 컴포넌트에서는 같은 순서로 훅을 호출한다. * if, for 문 안에서 훅을 사용하면 안된다. * 함수안에서도 훅을 사용하면 안된다. 항상 호출될수 알 수 없음 * 실수 방지를 위해 return 문 이후에 훅 사용금지 function CompoEx1(){ const [value,setValue] = useState(0); if (value === 0){ const [v1,setV1] = useState(0); }else{ const [v2,setV2] = useState(0); } if (1){ return null } const [] = useState(); return 하지 말랬지! } useState()의 인자는 초기값뿐임. 그래서 여러개 사용시 useStat..

* 리액트에서 제공하는 함수처럼, 내가 훅을 생성할 수 있다. * 훅의 네이밍룰 : useXXX() * 훅 생성을 위한 새 파일 useXXX.js /* 기존 */ export default function Profile({userId}){ const [user, setUser] = useState(null); useEffect(()=>{ getUserApi (useId).then(data => setUser(data)); }, [userId]); return {`name is ${user.name}`} {`age is ${user.age}`} } /* 훅을 사용 */ export default function Profile({userId}){ const user = useUser(userId); retu..

아래는 ID로 프로필 정보를 보여주기 위해 API를 호출하는 함수이다. import React, {useState,useEffect} from 'react'; export default function Profile({userId}){ const [user, setUser] = useState(null); useEffect(()=>{ getUserApi (useId).then(data => setUser(data)); }, [userId]); return {`name is ${user.name}`} {`age is ${user.age}`} } const USER1 = {name :'mike', age:10}; const USER2 = {name :'D', age:20}; function getUserAp..