'📃 Front-End' 카테고리의 글 목록 (10 Page)

사용자 입력 처리

2022.10.23

사용자에게 입력을 받는 태그는 , 등 존재 하는데 React 에서 직접 핸들링 할 때는 어떻게 하는 지 알아보겠습니다. useState 이용 ✔ input 의 value 설정 import { useState } from 'react'; const DiaryEditor = () => { const [author, setAuthor] = useState(''); // author 라는 state 는 setAuthor 가 아니면 상태변화가 일어나지 않습니다. // 그러므로 화면 input 창에 어떠한 것도 임의로 입력 할 수 없습니다. return ( 오늘의 일기 ); }; export default DiaryEditor; 초기에 input 에는 아무런 값도 입력되지 않습니다. 이유는 input 태그에 val..

📃 Front-End/React.js

Props

2022.10.23

컴포넌트에 데이터를 전달하는 방법 데이터를 전달하는 방법 ❓ 초기 값을 전달하고 싶을 경우 {} 을 사용하여 데이터를 지정 합니다. JSX에서 특정 태그에 값을 전달하기 위해서는 {} 를 이용하거나 문자열로 전달하여야 합니다 ✔ App.js mport './App.css'; import MyHeader from './my_header'; import Counter from './count'; function App() { return ( // 5라는 값을 전달 합니다. ); } export default App; 부모 컴포넌트인 App 에서 자식 컴포넌트인 Counter 에게 값을 전달 데이터를 사용하는 방법 ❓ ✔ Count.js import React, { useState } from 'react';..

📃 Front-End/React.js

State(상태)

2022.10.23

계속해서 변화하는 동적인 값, 값에 따라 다른 행동을 수행하게 합니다. React의 State란 ❓ 컴포넌트가 갖는 계속 값이 바뀌는 동적인 데이터 상태를 바꾸는 등의 관리는 상태를 가진 컴포넌트가 직접 관리하게 됩니다. ✔ useState() 컴포넌트는 자신의 가진 상태(state)가 변화하면, 화면을 다시 그려 reRender 를 합니다. 즉, 함수가 다시 호출 됩니다. ✔ 버튼을 누를 때마다 +- 1씩 변화하는 Counter import React, { useState } from 'react'; const [ count, setCount ] = useState(0); // const [ 상태 값, 상태 변화 함수 ] = useState(초기 값); // counter.js import React,..

📃 Front-End/React.js

JSX 문법

2022.10.23

들어가기 전 React 동작 방식 ❓ ✔ 먼저 최상위 컴포넌트 정의 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; ReactDOM.render( // (3) , document.getElementById('root') // (2) ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more..

📃 Front-End/React.js

Create-React-App

2022.10.23

React App을 만드는 방법 ✔ 라이브러리의 활용 React의 package를 다운로드 받는다고 바로 사용할 수는 없습니다. 추가적인 아래와 같은 라이브러리들이 필요 합니다. 물론 이외에도 존재 합니다. ✔ Boiler Plate (Create-React-App) 복잡한 환경 설정까지 다 해놓은 package 를 감싼 package 미리 틀을 준비하고 사용만 하면 됩니다. Create-React-App ✔ 설치 방법 npx create-react-app 이름 ✔ yarn 1. npm install -g yarn 2. yarn create react-app 파일명 ✔ 설치 후 초기 프로젝트 파일 . ├── README.md ├── package-lock.json ├── package.json ├── p..

📃 Front-End/React.js

React.js

2022.10.23

React.js React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 출처 : 위키백과 Why React.js ❓ ✔ React 는 Component 기반의 UI 라이브러리 만약 Header 요소에 문제가 생겨서 수정해야 되는 상황이면 기존 방식은 Header 를 포함하고 있는 모든 파일을 수정해야 됩니다. 하지만 컴포넌트화 방식은 컴포넌트가 정의된 파일 하나만 수정하면 다른 페이지들은 자동으로 수정 됩니다. 즉, 공통으로 사용되는 요소의 수정 사항이나, 문제가 발생 했을 경우 수정하기 수월하고, 유지보수가 좋아집니다. ✔ React 는 선언형 프로그래밍 프론트엔드 측면에서 오른쪽의 선언형 프로그래밍이 요즘 시대에 더 각광 받고 있습니다. ✔ Virt..

📃 Front-End/TypeScript

타입스크립트의 모듈

2022.10.23

ES6 와 비슷 합니다. 모듈은 전역 변수와 구분되는 자체 유효 범위를 가지며 export, import 와 같은 키워드를 사용하지 않으면 다른 파일에서 접근할 수 없습니다. 사용방법 ✔ Export ES6의 export와 같은 방식으로 변수, 함수, 타입, 인터페이스 등에 붙여 사용합니다. // types.ts export interface Todo { title: string; checked: boolean; } ✔ Import ES6의 import와 동일한 방식으로 사용합니다. // app.ts import { Todo } from './types' let item: Todo = { title: '할 일 1', checked: false } ✔ Tip import 를 입력하고 {} 빈 객체를 먼저 ..

📃 Front-End/TypeScript

타입 호환(Type Compatibility)

2022.10.23

타입스크립트 코드에서 특정 타입이 다른 타입에 잘 맞는지를 의미합니다. ✔ 구조적 타이핑 예시 구조적 타이핑(structural typing)이란 코드 구조 관점에서 타입이 서로 호환되는지의 여부를 판단하는 것입니다. ✔ 인터페이스 interface Developer{ name: string; skill: string; } interface Person{ name: string; } let developer: Developer; let person: Person; developer = person; // 에러이유 : 왼쪽에 있는 변수가 더 큰 관계를 가지고 있어서 person = developer; // 에러가 안뜬다. 오른쪽에 있는 타입이 더 많은 속성을 가지거나, 구조적으로 더 컸을 때 왼쪽과 호환이..

티스토리툴바