JavaScript73 [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. [해결 방법] Encountered two children with the same key ⚛️ 기본 환경: IDE: VS code, Language: React 발생 Error React에서 다음 Source Code를 실행할 경우, 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 const App = () => { const [courseGoals, setCourseGoals] = useState([ { text: "Do all exercises!", id: "g1" }, { text: "Finish the course!", id: "g2" }, ]); const addGoalHandler = (enteredText) => { setCourseGoals((prevGoals) => { const updatedGoals = [.... 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 ··· 4 5 6 7 8 9 10 ··· 13 다음
