웹 프로그래밍/React25 리액트 공식문서 읽기 - 주요개념(State) State `state`: 리액트 컴포넌트에서 동적으로 변화하는 값을 관리하기 위해 사용되는 객체 State를 올바르게 사용하기 `setState()`: 컴포넌트의 state 객체에 대한 업데이트를 실행하는 함수. state가 변경되면 컴포넌트는 리렌더링 된다. setState()에 대해 알아야 할 것 1. 직접 State 수정 금지 //❌ this.state.comment = 'Hello'; //⭕ this.setState({comment: 'Hello'}); `setState()`를 이용해 state 값을 변경해야 한다. `this.state`는 constructor에서만 지정할 수 있다. 2. State 업데이트는 비동기적일 수 있다. React는 성능을 위해 `setState()` 호출을 단일 업.. 2024. 3. 19. 리액트 공식문서 읽기 - 주요개념(Components와 Props) Components와 Props 컴포넌트 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나눌 수 있다. 개념적으로 컴포넌트는 JS 함수와 유사하다. 👉 `props`라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다. //함수형 function Welcome(props) { return Hello, {props.name}; } //클래스형 class Welcome extends React.Component{ render(){ return Hello, {this.props.name} } } 👉 객체 인자를 받은 후 React 엘리먼트를 반환하는 유효한 React 컴포넌트 컴포넌트 렌더링 React는 사용자 정의 컴포넌트로 작성한 엘리먼트를 발.. 2024. 3. 18. 리액트 공식문서 읽기 - 주요개념(엘리먼트 렌더링) 엘리먼트 렌더링 엘리먼트 (!== 컴포넌트) React 앱의 가장 작은 단위, 리액트 앱을 구성하는 요소 화면에 표시할 내용을 기술한다. const element = Hello, world!; 브라우저 DOM 엘리먼트(브라우저 환경에서 웹 페이지의 구성요소를 나타내는 특수 객체)와 달리 React 엘리먼트는 일반 객체(plain Object)이며 쉽게 생성할 수 있다. React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트한다. DOM에 엘리먼트 렌더링하기 루트(root) DOM 노드: root 안에 들어가는 모든 엘리먼트는 React DOM에서 관리한다. React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 존재한다. React 엘리먼트를 렌더링하기 위해서는 우선 DOM.. 2024. 3. 18. 리액트 공식문서 읽기 - 주요개념(Hello World, JSX 소개) Hello World 가장 단순한 React 예시 JS(Babel) const root = ReactDOM.createRoot(document.getElementById('root')); root.render(Hello, world!); html JSX 소개 React의 특성 렌더링 로직이 UI로직(이벤트 처리 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다는 사실을 받아들임. 별도의 파일에 마크업과 로직을 넣어 기술을 분리하는 대신, 둘 다 포함하는 `컴포넌트`라는 느슨하게 연결된 유닛으로 관심사를 분리한다. JSX가 필수는 아니다. JSX cost element = Hello, world!; JavaScript를 확장한 문법 js 코드 내에서.. 2024. 3. 18. 리액트 공부 내용 정리 💎 NavLink와 Link의 차이는? - NavLink는 특정 링크에 스타일을 넣어줄 수 있다. [React] Link와 NavLink 리액트는 페이지(URL) 이동할 때마다 서버에서 받는 것이 아니라 자바스크립트가 출력을 해준다. 페이지 경로를 나눠주는 것이 라우터이다. velog.io 💎 React-Router-Dom createBrowserRouter React Router v6.4 이상에서 Router 다루기(RouterProvider, createBrowserRouter, Route) 들어가기 전 21년 말, react-router-dom을 사용할 땐 v6.3이었다. 현재는 메이저 버전은 동일하지만 v6.4를 기점으로 기존에 없던 새로운 기능이 추가되어 이를 소개하고자 한다. 아래의 사진에서 .. 2023. 9. 14. [React] 상위 컴포넌트에서 하위 컴포넌트로 데이터 전달하기(props) App.js의 데이터를 props를 이용해 하위 컴포넌트에 전달한다. props를 사용함으로써 컴포넌트의 재사용성을 높일 수 있다. props 전달 방법 3가지 1. 기본 사용법 App.js ExpenseItem.js function ExpenseItem(props) { return ( {props.date.toISOString()} {props.title} ${props.amount} ); } ⏏️ props: 상위 컴포넌트에서 내려주는 데이터. 객체 형식으로 되어 있다. 2. 비구조화 할당을 이용한 props 전달받기 😊 비구조화 할당: 객체에서 값을 추출하는 문법 (React 문법이 아님. JS 문법) ExpenseItem.js function ExpenseItem({title, amount, da.. 2023. 9. 5. [React] Link to 밑줄 없애기 Link의 스타일 속성에서 위와 같이 밑줄 없애기를 선택할 수 있다. 참고 https://tinyurl.com/ybf4kmeo [javascript] React Router의 Link 컴포넌트 밑줄을 제거하는 방법은 무엇입니까? - 리뷰나라 다음이 있습니다. 파란색 밑줄을 제거하려면 어떻게합니까? 코드는 다음과 같습니다. Team 1 MenuItem 구성 요소는 http://www.m daplus.net 2022. 4. 10. [React]material ui 로그인 페이지 템플릿 코드 분석 로그인 페이지 코드 분석 전체 페이지 코드 분석 로그인 창 아래 copyright 부분을 구현한 코드 function Copyright(props) { return ( {"Copyright © "} 소셜 가계부 {" "} {new Date().getFullYear()} {"."} ); } 1. variant="body2" color="text.secondary" align="center" {...props} Typography 컴포넌트 https://mui.com/customization/typography/ Typography - MUI The theme provides a set of type sizes that work well together, and also with the layout grid.. 2022. 3. 31. [React]material ui 대시보드 템플릿 설치 대시보드 템플릿 설치 대시보드 템플릿 다운로드 페이지 https://mui.com/store/?utm_source=docs&utm_medium=referral&utm_campaign=templates-store React themes & templates | MUI Store This is a collection of the best React templates, React dashboard, and React themes. Our collection was curated by MUI's creators. It includes templates and themes for dashboard, admin, landing page, e-commerce site, application, and more. mui.. 2022. 3. 29. [React, FrontEnd] 웹 사이트 프로젝트 일지-1. 프로젝트 생성과 material ui 설치, 템플릿 이용해서 로그인 및 회원가입 페이지 구현(중단) 리액트 폴더 만들기 create-react-app . material ui 사용 https://mui.com/getting-started/installation/ Installation - MUI Install MUI, the world's most popular React UI framework. mui.com yarn add @mui/material @emotion/react @emotion/styled yarn add @mui/material @mui/styled-engine-sc styled-components yarn add @mui/icons-material 위 명령어들을 터미널에 입력해서 필요한 패키지들을 모두 다운받아 준다. material ui 템플릿 https://mui.com/gett.. 2022. 3. 28. [생활코딩]React 강좌 내용 정리5(Create, Update, Delete) 보호되어 있는 글 입니다. 2022. 3. 20. [생활코딩]React 강좌 내용 정리4(state) 보호되어 있는 글 입니다. 2022. 3. 20. 이전 1 2 3 다음 반응형
