FrontEnd
15_리액트_유용한 tool
Prettier 코드 스타일을 내 스타일대로 커스터마이징 할수 있는 기능 npx create-react-app useful-tools 위 기능을 테스트하기 위해 우선 새로운 리엑트 프로젝트를 하나 만들었다. vs코드에서 Prettier을 깔아주고, 프로젝트 root폴더에 .prettierrc파일을 만들어주자. 파일 내용은 아래 홈페이지를 참조해도 좋다 https://prettier.io/docs/en/configuration.html Prettier · Opinionated Code Formatter Opinionated Code Formatter prettier.io { "trailingComma": "all", "tabWidth": 4, "semi": true, "singleQuote": true }..
14_리액트_클래스형 컴포넌트
class형 컴포넌트 함수형 컴포넌트와는 다른 방식으로 요즘에는 자주사용하지 않는 방식이나 알아둘 필요는 있다. class형 컴포넌트로만 가능한 기능이 한두어개 있기 때문 import React from 'react'; function Hello({color,name, isSpecial}) { return ( {isSpecial ? * : null} {isSpecial && *} 안녕하세요 {name} ); } Hello.defaultProps = { name: '이름없음' }; export default Hello; //hello 컴포넌트를 만들어서 내보내겠다 color,이름을 받아와서 isSpecial값에 따라 앞에 *가 붙는 간단한 예제가 있다. 이 예제를 class형 컴포넌트로 바꾸어 보자. cl..
13_리액트_Context API,immer
Context API 이 전글의 예제에서도 그렇지만 리액트에서 여러개의 컴포넌트를 거쳐가면서 Props를 전달해줘야 하는 경우가 많다. 즉, A -> B -> C -> D 와같이 차근차근 Props를 넘겨주는 경우인데, 이를 A -> D로 한번에 넘길 수 있는 방법이 있다. //ContextSample.js import React, {createContext, useContext} from 'react'; function Child( {text} ) { return 안녕하세요? {text} } function Parent( { text }) { return } function GrandParent( { text }) { return } function ContextSample() { return } ex..
12_리액트_여러 Hook들
useEffect 처음 화면에 나타나게 되거나 사라질때, 업데이트될때 작업을 진행하게 할 수 있다. 간단한 예를 먼저한번 보자 //UserList.js import React, {useEffect} from 'react'; function User({user, onRemove,onToggle}) { const {username,email,id, active} = user; useEffect( () =>{ //mount console.log('컴포넌트가 화면에 나타남'); //props -> state //REST API return () =>{ //unmount console.log('컴포넌트가 화면에서 사라짐'); } //clearInternval,clearTimeout }, []) 위 코드는 이전에 ..
11_리액트_배열 랜더링
이번에는 리액트에서 배열을 랜더링하는 방법에 대해 알아보겠다. 역시 UserList란 파일을 하나 만든후에 App.js에 연결해 준 후, import React from 'react'; function UserList() { const users = [ { id : 1, username : 'mingyu', email : 'mingyu@naver.com' }, { id : 2, username : 'mingyu2', email : 'mingyu2@naver.com' }, { id : 3, username : 'mingyu3', email : 'mingyu3@naver.com' } ]; return ( {users[0].username}({users[0].email}) {users[1].username}(..
10_리액트_input상태,useRef
이번에는 input버튼으로 값을 읽어오고 표현하는 법을 통해 input상태 관리법을 공부했다. 위처럼 글을 쓰면 그 값을 표시하고, 초기화를 눌렀을때 초기화가 되게하는 방법이다. 저번에 만들었던 리액트 파일 그대로 사용하였다. 우선, src파일에 InputSample파일을 추가한다. //App.js import React from 'react'; import './App.css'; import InputSample from './InputSample'; function App() { return ( ); } export default App; App.js에는 단순히 만든 InputSample을 표시한다. import React, {useState} from 'react'; function InputSam..