코딩하는 복서 🥊

1. wrapper 컴포넌트는 왜 필요한가? 다수의 컴포넌트에서 공통적으로 적용되는 CSS 코드가 있는 경우, 코드 중복을 줄이고 관리의 편의를 위해 *CSS는 예시일 뿐, 다양한 상황에서 필요할 수도... * 이렇게 수십, 수백군데에 감싸놓고 css파일또한 컴포넌트별로 생성해뒀다면 변경사항이 생겼을때 수십, 수백군데 다 고쳐줘야 한다. 2. 작성법 1) 컴포넌트의 컨텐츠를 감쌀 wrapper 가 될 Card 컴포넌트를 만들어보자. Card.js (wrapper 컴포넌트) import './Card.css' export default function Card(){ return } Card.css 중복되는 css 코드를 작성한다. .card{ border-radius: 12px; box-shadow: 0 ..

1. export default export default 를 하면 import 에서 '어떤 이름'을 하던 그 파일에서 가져오는 건 디폴트로 설정한 것을 가져옴. 2. export (named export) 한 파일에서 export 하는 게 많을 경우, default 없이 export somthing, export something 함 3. import 1) default가 있는 export 를 import 하는 경우 { } 쓰지 않고 가져오는 변수를 내가 이름을 정해서 쓸 수 있음. (보통 파일명과 동일하게 감. 혼선을 피하기 위해) e.g. import 내가정한이름 from './my/component' // 수입 const mydata = () => `내이름: ${내가정한이름}` // 이렇게 가져와..

제네릭: 어떤 타입이 올 지 모르거나 다양한 타입이 필요한 경우, 실행하는 쪽에서 타입을 고르도록 함. // 이렇게 하나하나 적지 않고 function getSize1 (arr: number[] | boolean[] | string[] | object[]) { return arr.length; } // 실행하는 쪽에서 타입을 결정하게 함. 에 다른 대문자 써도 됨 function getSize2(arr: T[]){ return arr.length; } const arr1 = [1,2,3] getSize2(arr1) const arr2 = ["a","b","c"] getSize2(arr2) const arr3 = [{name:"cole", age: 23},{name:"jane", age: 50}] getS..

자바스크립트는 동적언어다. 즉, 런타임(실행될 때)에 타입이 결정되며 오류를 발견한다. 그러나 타입스크립트는 정적언어다. 즉, 컴파일(컴퓨터 또는 다른 언어가 읽을 수 있는 언어로 변환) 될 때 타입이 결정되며 오류를 발견한다. 0. 타입스크립트 typescript 란 다이나믹하게 이래도되고 저래도되는 망나니 javascript를 엄격하게 관리하는 일종의 에디터다. 모든 데이터의 타입을 정하여 타입 언매치로 발생하는 오류나 예상밖의 결과값을 예방할 수 있다. 1. node.js 설치 https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. vscode 설..

useRef 를 사용하여 DOM 요소에 쉽게 접근할 수 있다. 1. 개요 마운트되었을 때부터 INPUT 창이 활성화 되어 있도록 input 태그에 focus() 메소드를 사용할 것 2. inpiut 태그를 참조할 useRef를 선언 const inputRef = useRef(); 3. input 태그에 ref={} 프로퍼티로 참조시켜 준다. 4. useEffect 로 마운트부터 포커스되도록 inputRef를 가져와 focus()를 걸어준다. *inputRef.current.focus() 는 document.getElementById('input').focus() 와 동일한 역할을 한다. useEffect(() => { inputRef.current.focus(); // document.getElement..

1. useRef 란? 리액트 Hook으로 State 처럼 값을 저장하는 공간인데 값이 바껴도 랜더링을 안 함 2. 선언 import { useRef } from 'react' const 변수이름 = useRef(초기값) 3. 값(value)는 어떻게 뽑아다 쓰나요? 변수이름.current 를 가져다 쓰면 됨. *ref는 current 라는 프로퍼티에 저장을 함. 4. useRef는 언제 쓰나요? 결론: 변화는 감지해야하지만 그 변화가 랜더링을 발생시키면 안되는 값을 다룰 때 1) 값 변경시 랜더링을 하면 안되거나 랜더링이 필요 없거나 너무 자주 랜더링이 될 것 같은 경우 *state는 값이 변화할 때마다 새로 랜더링 *ref에서 값이 변화해도 랜더링하지 않음. 2) 값을 전 생애주기로 유지시킬 때 (랜..

1. 어떻게?state를 통해 버튼을 누르면 완료될때까지 버튼의 클릭 기능을 없애서 중복 클릭을 못하게 함. 2. 적용1) 불리언 타입의 State 를 만들어 준다. const [isBtnDisable, setIsBtnDisable] = useState(false); 2) 버튼의 state (true, false) 두가지 상태를 정의해준다.*여기선 버튼 대신 이미지를 사용하였다. *클릭 후 처리 중엔 아예 클릭이 불가능하게 하였다. - 클릭 전 (onClick 프로퍼티가 있음)isBtnDisable === false 일 때 버튼은 이렇고 // isBtnDisable === false && - 클릭 후 (onClick 프로퍼티가 없음)isBtnDisable === true 일 때 (클릭 후) 버튼은 이렇다..

1. 들어가며 useState 만으로 게시판으로 변형이 가능한 초간단 회원정보 리스트를 만들어 보자. 이 리스트는 회원 등록(Create), 조회(Read), 수정(Update), 삭제(Delete)가 가능하다. 2. 외형 1) 회원 정보를 적는 input 3개와 추가 button이 있고, 회원 생성시, 회원 정보 옆에 수정 button 과 삭제 button 을 만든다. 2) 회원 리스트는 addPerson 함수를 통해 생성된 객체 배열을 map으로 돌며 리스트 생성. function App() { // 성 입력창 상태 const [firstName, setFirstName] = useState(); // 이름 입력창 상태 const [lastName, setLastName] = useState(); /..

1. 들어가며 1) setter 함수에 인자로 어떤 타입이 들어가냐에 대한 내용이다. 2) 그 중에서도 가장 기초적인 number, string, boolean 타입이 들어간 경우를 살펴본다. 2. input 태그를 활용하여 타입별 state 다루기 1) type 프로퍼티로 입력 받을 값의 타입을 정해준다. 2) value 프로퍼티의 값을 state 값으로 연결한다. 3) 값이 변할 때마다 감지하도록 onChange 이벤트 핸들러를 넣고 setter 함수로 state 값을 업데이트한다. 📌 Number 타입으로 선언해보면 이런 모양이다. function App() { //Number const [num, setNum] = useState(0); return ( 숫자 setNum(e.target.value..

1. 커스텀 훅을 왜 만들어? 1) 반복되는 훅이 있다면 매번 작성하는건 비효율적이다. 2) 관리가 용이하다. 만약 수정사항이 있다면 본체 하나만 바꾸면 된다. 2. 어떻게 만들어? 반복되는 걸 묶으면 되는데 상황이 다양하니 아래 예제를 살펴보자. 3. 예제 fetch로 API 호출하고 useEffrct, useState 로 호출된 값의 변화에 따라 새로운 값을 리턴해주는 하나의 모듈를 맹글어봐 1) 예를 들어, fetch()로 url에서 데이터를 받아 json으로 바꾸고 배열로 리턴해주는 반복되는 모듈이 있다고 하자. 2) 여기서 바뀌는 것은 url 뿐이니 url 을 받아 동일한 작업을 수행하는 모듈을 만들어보자. - 커스텀 훅을 따로 관리하도록 폴더를 새로 파도 좋다. - 컴포넌트 만드는 것과 동일한..