React15 [React] Fragments, Portals & "Refs"(섹션9) JSX Limitations & Fragments Getting a cleaner DOM with Portals Working with Refs 1. JSX 제한사항 및 해결방법 반환되는 "root" JSX element는 단 하나여야만 한다. 여러 개의 JSX element들을 인접하게 반환할 수 없다. 그러나, 루트 element 안에는 여러 개의 JSX element가 인접할 수 있다. 해결법 1) 인접한 요소들을 등의 element 하나로 감싸서 반환 해결법 2) native javascript array: JSX element들을 자바스크립트 배열 []에 담아서 반환, 그런데 이때는 모든 element들에 "key" props를 주어야 함. -> 모든 element들에 key속성을 주는 것은 귀.. 2022. 6. 20. [React] 간단한 연습 프로젝트 만들어보기(섹션8) 연습 프로젝트는 username과 age를 입력해서 리스트로 보여주고, 만약 둘 중 하나라도 입력되지 않은 경우, 혹은 age가 음수로 작성된 경우에는 경고 모달창을 띄우는 기능을 가진다. 1. User 정보 입력 폼 구성 AddUser.js import React from "react"; const AddUser = (props) => { const addUserHandler = (event) => { event.preventDefault(); }; return ( Username Age (Years) Add User ); }; export default AddUser; 여기서 주의깊게 봐야하는 부분은 label의 htmlFor속성이다. html코드에서는 label의 for속성에 연결하고자 하는 ele.. 2022. 6. 10. [React] 리액트 앱 디버깅하기(섹션7) 오류를 찾고 해결하는 것은 개발의 중요한 과정 중 하나 understanding error massages debugging & analyzing react apps using the react dev tools 1. 리액트 오류 메세지 이해하기 특정 에러들은 터미널 창과 브라우저에서 해당 오류메세지와 오류가 발생한 코드 부분을 보여준다. 이 오류 메세지를 읽고 오류 발생 부분을 확인하여 해결하도록 하자. 2. 코드 흐름 및 경고 분석 터미널이나 브라우저에 오류가 뜨는 것은 아니고 프로젝트가 실행되지만, 예상과 다르게 작동할 때(논리적인 흐름이 맞지 않을 때, 논리적 오류)는 해당하는 기능에 해당하는 코드를 기준으로 따라 올라가면서 혹은 내려가면서 잘못 작성된 코드를 찾으면 된다. 혹은 개발자도구의 콘솔.. 2022. 6. 1. [React] 리액트 컴포넌트 스타일링(세션 6): styled components, css모듈 Conditional & Danamic Styles Styled Components: third party library, 특정 범위에 대해서만 css 스타일 적용하기 CSS modules 1. 동적 인라인 스타일 설정하기 먼저 기본 프로젝트에서는 input에 아무것도 입력하지 않고 Add Goal 버튼을 눌러도 아이템이 추가된다. 이것을 피하려면 스타일을 동적으로 설정해야 한다. 먼저 기존 input관련 컴포넌트 코드를 살펴보면, 아래와 같다. import React, { useState } from "react"; import Button from "../../UI/Button/Button"; import "./CourseInput.css"; const CourseInput = (props) => {.. 2022. 5. 28. [React] 렌더링 리스트 및 조건부 Content(섹션5) Rendering Lists & Conditional Content : working with really dynamic content Outputting Dynamic Lists Of Content Rendering Content Under Certai Conditions 페이지에 데이터 배열을 출력하는 방법, 다른 조건(상황)에서 다른 컨텐츠를 보여주는 방법 등을 알아보자. 1. 데이터의 렌더링 목록 지금까지 expense 데이터 배열은 app.js에 하드 코딩되어 있었다. 또한 Expenses.js를 살펴보면 JSX코드로 ExpenseItem 컴포넌트를 정적으로 하드코딩되어 있다. 몇 개의 아이템이 추가로 입력되고 필터링될 지 알 수 없으므로 이 부분을 동적으로 변환해주어야 한다. 그럼 이 Expe.. 2022. 5. 21. [React] react 18버전 ReactDOM 관련 warning Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot 실습 하던 콘솔창에 위와 같은 경고가 계속 뜨는 것을 확인하고 찾아보니, react18 버전에서 ReactDOM 렌더링 방식이 바뀌었다고 한다. https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering.. 2022. 5. 17. 이전 1 2 3 다음
