💻 useEffect 활용법 ❗ 의존성 배열은 잘못 입력 시, 버그로 이어질 수 있어 되도록 사용하지 않는 것을 권장 💡 useEffect 내에서 사용되는 값은 의존성배열에 추가해주어야 변경사항이 적용됨. function Profile({ userId }) { const [user, setUser] = useState(); useEffect(() => { fetchUser(userId).then(data => setUser(data)); }, [userId]); } 💡 마운트 시점에만 실행되기 원한 다면 별도의 훅으로 사용하면 더 직관적이라는 장점이 있습니다. function Profile({ userId }) { const [user, setUser] = useState(); useOnMounted((..

💻 5.1 문과 표현식 자바스크립트에서의 문 != 표현식 문: 문장 표현식 : 어구 연산자: 구두점/접속사 var a = 3*6; var b=a; b; 자바스크립트에서의 표현식은 "단일한, 특정한" 결괏값으로 계산됨. 위 각 세줄은 표현식이 되기도하고, 표현식이 포함된 문이기도하다. + '선언문' : var a = 3 * 6; 이런식의 변수 선언의 문 + '할당 표현식' : a = 3 * 6; + '표현식 문' : 표현식의 전부이면서 완전환 문 💡 문의 완료 값 모든 문은 완료 값을 가짐. var a = 43; //완료값 : undefined a = 43; //완료값 : 43 선언문의 완료값은 undefined 할당 표현식은 할당 이후의 값이 완료값 ❗ {}블록은 마지막 문/표현식의 완료값이 블록의 완료..

💻 추천하는 컴포넌트 파일 작성법 컴포넌트 파일의 상단에 속성값 타입을 상단에 작성 해주는 것이 좋습니다. MyComponent.propTypes = { //... } 💡 컴포넌트에 이름을 붙여주는 것이 디버깅할때 확인이 편함. export default function ({ prop1, prop2 }) {} 👇 export default function MyComponent({ prop1, prop2 }) {} 💡 외부 객체나 변수 같은경우는 가장 밑에 따로 작성 MyComponent.propTypes = { //... } export default function MyComponent({ prop1, prop2 }) {} const DATA = []; function setData(data) { DA..

💻 암시적 변환 암시적 변환 : 숨겨진 형태로 일어나는 타입변환 암시적 변환이 코드를 더 복잡하고 이해하기 어렵게 많든다는 논란은아직까지도 많다고 합니다. 하지만, 교재에서는 긍정적인 관점으로 살펴보고있어 저 또한 장점을 위주로 살펴보겠습니다. 암시적 변환의 목적은 '불필요한 상세 구현을 줄이는 것'이라고 볼 수 있습니다. 👉 '암시적'이란? 예를 들어 타입변환의 의사코드를 살펴보면 아래와 같습니다. Sometype x = SomeType(AnotherType(y)) 즉, 타입이 바로 변환되는 것이 아닌 중간단계를 거치는 부분까지 표현이 되는데요, 이를 암시적으로 단순화 하여 표현 할 수있습니다. Sometype x = SomeType(y) 이렇게 작성하여 코드 가독성을 높이고, 세세한 구현부를 추상화하..

📍 훅 규칙 💡 훅 사용 순서는 늘 같아야 함 👉 if문 for문 등에 넣어 조건적으로 호출되면 안 됩니다. 👉 if 문 return 뒤에 사용도 마찬가지입니다. 💡 함수형 컴포넌트나 커스텀 훅에서만 호출 가능 📍 Context API 속성 값을 하위 컴포넌트로 넘겨 사용할 경우, 컴포넌트 트리가 깊다면 속성값을 여러 컴포넌트에 걸쳐 넘겨줘야 하는 불편함이 있습니다. 이를 해결할 수 있는 방법으로 context API가 있습니다. import React, {useContext, createContext } from 'react'; const UserContext = createContext('unknown'); export default function App() { return ( 상단 메뉴 하단 메뉴..

💻 4.1 값 변환 자바스크립트의 타입변환 💡 암시적 강제변환 부수효과로부터 발생하는 타입변환 💡 명시적 강제변환 의도적으로 타입변환 var a = 43; var b = a + ""; //암시적 강제변환 var c = String(a) //명시적 강제변환 💻 4.2 추상 연산 📍 ToString 명시적으로도 가능 & 문자열 콘텍스트에 문자열 아닌 값이 있으면 자동 호출 💡 숫자 toString() 을 통해 그냥 문자열로 바뀜. + 큰 숫자는 지수형태 💡 일반 객체 기본적으로 Object.prototype.toString()메서드가 내부 [[Class]]를 반환 (ex. [object Object]) 💡 배열 배열은 기본적으로 모든 원소 값이 ','로 분리된 형태로 이어짐 var a =[1, 2, 3]; ..