JavaScript/React32 [ReactJS_Complete] <div> Soup 이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다. ⚛️ 기본 환경: IDE: VS code, Language: React JSX에서 return 값은 1개만 가능하므로 여러 요소들이 return될 때, 1개의 tag로 감싸거나 배열을 선언해야 함(참고) ⭐ 배열 선언보다는 를 통해서 1개의 return값을 만듦 🚨 JSX 요구사항에 따른 다수의 선언에 따른 불필요한 생성 ▶ tag styling에 좋지 않 ▶ 다수의 html 요소 rendering에 따른 페이지 로딩 속도 저하 Soup 해결 방법 1. Wrapper.js 생성 1 2 3 4 5 6 const Wrapper = (props) => { return props.. 2023. 6. 1. [ReactJS_Complete] JSX Limitations & Workarounds 이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다. ⚛️ 기본 환경: IDE: VS code, Language: React JSX return값 1개 1 2 3 4 5 return ( Hi there! This does not work :-( ); cs 🚨 Adjacent JSX elements must be wrapped in an enclosing tag 해결방법 1. Wrapper 태그로 감싸기 1 2 3 4 5 6 7 return ( Hi there! This does not work :-( ); cs ⭐ div tag뿐만 아니라 다른 기본 html 태그도 가능하며, component 또한 가능 2. 배열 선언 1 .. 2023. 6. 1. [ReactJS_Complete] Conditional Styling 이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다. ⚛️ 기본 환경: IDE: VS code, Language: React 1. Setting Dynamic Inline Styling 1 2 3 4 5 6 7 8 9 10 11 12 13 14 return ( Course Goal Add Goal ); cs 2. Setting CSS Classes Dynamically 1 2 3 4 5 6 7 8 9 10 return ( Course Goal Add Goal ); cs 1 2 3 4 5 6 7 8 9 .form-control.invalid input { border-color: salmon; background-color: .. 2023. 6. 1. [ReactJS_Complete] For ... in or of 이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다. ⚛️ 기본 환경: IDE: VS code, Language: React 1. For ... in ...: 객체에서 사용 권장 : 순서없이 반복되어 배열의 인덱스 순서대로 반복문이 진행된다는 보장이 되지 않음 : 객체의 모든 열거 가능한 속성(key, value)을 반복할 수 있음 2. For ... of ...: 배열 등 Collection에서 사용 권장 : 배열의 인덱스 순수대로 반복문 진행 보장 : of 앞에는 index number가 아닌 배열의 요소를 나타냄 ▶ 배열의 0번째 요소를 출력하고 싶으면, arr[0]이 아닌 0(element)를 직접적으로 입력해야 함 .. 2023. 5. 31. [ReactJS_Complete] Outputting Conditional Content 이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다. ⚛️ 기본 환경: IDE: VS code, Language: React 조건문 출력 1. 3항 연산자 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 const Expenses = (props) => { return ( {filteredExpenses.length === 0 ? ( No Expenses found ) : ( filteredExpenses.map((expense) => ( )) )} ); }; cs 2. && 연산자 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 const Expenses = (props) =.. 2023. 5. 31. [ReactJS_Complete] Controlled Component, Uncontrolled Component 이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다. ⚛️ 기본 환경: IDE: VS code, Language: React 1. Controlled Component : 사용자의 입력을 기반으로 state를 관리하고 변경 는 selected값에 따라 value가 확정 = Controlled Component + Single Source of Truth, 신뢰 가능한 단일 출처 : 하나의 상태는 한 곳에서만 존재 : state value가 변경 → state값이 쓰인 곳도 항상 최신값으로 유지됨 : Single Source of Truth가 이뤄지는 component가 제어 컴포넌트 ❌ 불필요한 Rerendering or A.. 2023. 5. 29. 이전 1 2 3 4 5 6 다음
