FrontEnd/React
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 }..
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..
10_컴포넌트_JSX,props,useState
JSX문법 리액트에서 컴포넌트 생김새를 정의하는 문법으로 HTML처럼 생겼지만 사실 자바스크립트이다. 우리가 HTML형식으로 만들어주면 babel이 이것을 JS로 바꾸어준다. 위처럼 말이다. 이때 이 변환을 사용하기 위해서는 몇가지 문법을 꼭 지켜주어야 정상 변환이 된다. 1. 태그를 꼭 닫아주어야 한다. 리액트에서는 input이나 br태그같은 태그또한 닫아주어야 한다. 2. self tag 과같이 내용없이 닫히는 태그는 로 변환하여 쓸 수 있다. 3. function App() { return ( 나는정민규. ); } 위처럼 를 사용하여 불필요한 div태그를 줄일 수 있다. 4. () return 이후 ()는 가독성을 위해 존재하고 굳이 없어도 작동한다. 5. 변수 import React from 'r..