본문 바로가기

TIL

 (46)
[TIL] useState와 useRef import { useState, useRef } from 'react'; function App() { const [count, setCount] = useState(0); const refCount = useRef(0); const plusCountHandler = () => { setCount(count + 1); }; return ( UseState 카운트 : {count} 숫자 1 증가 UseRef 카운트 : {refCount.current} { refCount.current = refCount.current + 1; console.log(refCount.current); }} > + ); } export default App; useState useState는 컴포넌트의 상태를 관리하고 값이 ..
[TIL] hook - useContext 부모컴포넌트 => 자식컴포넌트로 내려줄 때 너무 깊어지게 되면 prop drilling 현상이 일어난다. 그러면 나중에는 어디에서 이 props가 전달되었는지 파악하기 어려워진다. context API를 쓰면 어떤 컴포넌트에 있더라도 전역적으로 사용할 수 있게된다. context API 개념 - createContext : context 생성 - Consumer : context 변화 감지 - Provider : context 하위 컴포넌트로 전달 // AllUseContext.js import { createContext } from "react"; export const AllUseContext = createContext(null); 다른 컴포넌트들이 쓸 수 있게끔 가장 상위에서 제공하는 역할을 하..
[TIL] React Hook - useState useState Hook은 가장 기본적인 hook으로 함수형 컴포넌트 내에서 가변적인 상태를 갖게한다. const [state, setState] = useState(초기값) 원래는 useState가 return 하는 값이 배열이다. 그리고 그 배열을 구조분해할당으로 받은 것 뿐이다. 배열에 return 값은 초기값으로 지정해놓은 그 변수 state가 있고, 그 state를 변경할 수 있는 setState가 있다. 함수형 업데이트가 왜 필요한가? export default funtion App() { const [number, setNumber] = useState(0); return Number state: {number}; //Number state: 0 } 여기에 만약 버튼을 누르면 +1씩 올라가는..
[TIL] React에서 map, filter로 문제풀어보기 map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아서 새로운 결과를 반환한다. const students = [ { name: 'Alice', age: 17, grade: 'A' }, { name: 'Bob', age: 18, grade: 'B' }, { name: 'Charlie', age: 16, grade: 'C' }, { name: 'Diana', age: 19, grade: 'D' }, ]; // TODO: filter를 사용하여 18세 이상의 학생들만 선택해주세요. const filteredArr = students.filter((student, index) => student.age >= 18); // TODO: 학생이름을 클릭하면 나이와 점수가 aler..
[TIL] useState 컴포넌트에서 동적인 값을 상태(state)라고 부른다. 리액트에는 useState라는 함수가 있는데 이것을 사용하면 컴포넌트에서 상태를 관리할 수 있다. useState를 사용하기 위해 App.js 최상단에 import 해준다.. import { useState } from 'react'; useState 변수 선언 방법 const [state, setState] = useState(초기값); input에 무언가 입력하고 코드를 실행하려면 onChange 아니면 onInput 이벤트 핸들러를 부착하면 된다. 여기서 onChange는 input창에 무언가를 입력할때마다 안에있는 코드를 실행한다. const InputArea = () => { // toDos를 변환시켜주는 setToDos const [toD..
[TIL] React 기본 용어 SPA란? 'Single Page Application' 으로 리액트가 SPA의 형식이다. 페이지가 하나라는 뜻으로 하나의 페이지안에 자바스크립가 필요한 페이지나 정보만 동적으로 그려준다. JSX란? JSX(JavaScript XML)는 JavaScript의 확장 문법으로, React에서 UI를 작성할 때 주로 사용된다. JSX는 HTML과 유사한 구문을 가지고 있어 React 컴포넌트의 가독성을 높이고 작성을 간편하게 한다. JSX에서 중괄호를 사용해 JavaScript 표현식을 삽입할 수 있다. 이를 통해 동적인 값이나 변수를 JSX에 포함시킬 수 있다. const btn = alert('Clicked!')}>Click me; Element(엘리먼트) React 앱의 가장 작은 단위로 React 엘리..
[TIL] Hook error에 자꾸 Hook이 뜨길래 검색해보다가 정리해놓아야 겠다는 생각이 들었다. React Hook은 v16.8부터 새로 추가된 기능이다. 특징으로는Component 사이에서 상태로직을 추상화해 상태 공유를 쉽게 만들어주고, 복잡한 컴포넌트를 작은 함수의 묶음 Component로 나눌 수 있다.Class없이 React 기능들을 사용할 수 있다.기존의 React에서 Class를 사용하기 위해 this 키워드가 어떻게 동작하는지 알아야했는데, Hook은 Class없이 React의 기능들을 사용하는 방법들을 제시한다. Hook에는 사용 규칙이 있는데, - 최상위에서만 Hook을 호출해야한다. (반복문, 조건문, 중첩함수내에서 Hook 실행 X) - React 함수 Component내에서만 Hook을 호출해..
[TIL] 객체(Object) 기초 자바스크립트는 객체기반의 스크립트 언어로 자바스크립트를 이루는 모든것들이 객체로 존재한다. 기본 정의 객체지향언어를 다루어본 사람이라면 객체의 기본개념이 데이터(주체)와 그 데이터에 관련되는 동작(절차, 방법, 기능)을 모두 포함하고 있는 개념이란 기본적인 내용은 익히 알고 있을 것이다. 한마디로 객체는 자신의 정보를 가지고 있는 독립적인 주체이다. 우리 주위에 보이는 컴퓨터, 책상, 의자, 마우스 등 모두 자신만의 특성을 가진 객체인 셈이다. 프로퍼티(Property) & 메소드(Method) 객체란 것은 결국 껍데기를 이루는 말이고 실제 객체를 완성하는 구성요소들은 이 property와 method이기 때문이다. 즉 우리가 객체라고 부르는 것은 케이스가 실제 컴퓨터를 구성하고 있는 것은 메모리, 보드..
VS Code Extensions 확장프로그램 정리 visual studio code 확장프로그램 추천 1. Auto Rename Tag 이 확장 프로그램은 여는 태그(예: )를 수정하면 자동으로 닫는 태그(예: )도 동일하게 수정해주는 기능을 제공한다. 이는 태그를 쌍으로 인식하고 한 쪽을 수정할 때 다른 쪽도 자동으로 동기화되도록 도와준다. 코드 작성 시 태그를 열고 닫을 때 발생하는 일관성을 유지하고 오타를 방지하는 데 도움이 된다. 2. vscode-icons 파일 및 폴더에 아이콘을 추가하여 프로젝트 내 파일 유형을 시각적으로 구별할 수 있도록 도와주는 extension이다. 이 확장 프로그램은 파일 및 폴더 아이콘을 테마별로 지원한다. 이런식으로 나온다. 3. Code Spell Checker 코드에서의 오타를 식별하고 수정하는 데 도움을 준다..
React 시작 전 설치 나중에 혹시 필요할지 모르니 설치 순서를 정리를 해놓아야겠다. 개발환경 설정 Node.js 설치 - React 프로젝트를 생성하기 전에 Node.js가 먼저 설치되어 있어야한다. - 설치 완료했다면 다음 명령어를 통해 버전 확인 가능 > 노드 버전 확인 : node -v > npm 버전 확인 : npm -v npm node를 설치하면 자동으로 설치됨 yarn - npm의 단점을 보완하여 성능과 속도를 개선한 것이 yarn이다. CRA(Create React App) : 한 줄의 명령어 입력으로 React 프로젝트 개발에 필수요소(WebPack, babel, eslint 등등)를 자동으로 구성하는 방법! 첫 리액트 프로젝트 만들기 VS Code를 실행하고 (미리 지정한 폴더를 열어도됨) 윈도우는 git b..

티스토리툴바