본문 바로가기
반응형

분류 전체보기

 (107)
React(리액트): 배열 항목 추가, 제거, 수정 배열에 항목 추가하기 이번에는 배열에 항목을 추가하는 방법에 대해 알아보자. 이 예제에서는 CreateUser 컴포넌트에서는 별 다른 상태 관리를 하지 않고 화면 구성만 할 뿐 상태 관리는 App 컴포넌트에서 해준다. App.js import "./App.css"; import UserList from './UserList'; import {useRef, useState} from 'react'; import CreateUser from './CreateUser'; function App() { const [inputs, setInputs] = useState({ username: '', email: '', }) const {username, email} = inputs; const onChange = ..
React(리액트): useRef로 컴포넌트 안의 변수 만들기 이번에는 useRef를 사용해서 컴포넌트 안의 변수를 만드는 방법을 알아보자. 여기서 말하는 변수는 예를 들어 컴포넌트 안에서 'let' 키워드를 사용해서 어떤 변수를 선언한다고 가정해보자. 이렇게 변수를 선언하면 다음 리 렌더링 될 때 그 변수 값은 초기화된다. 만약 계속 유지하고 싶은 값을 관리하려고 하면 이전에 공부했던 useState를 사용해야 하는데 useState 같은 경우는 상태를 바꾸게 되면 컴포넌트가 리 렌더링 된다. 하지만 우리는 가끔씩 어떤 값을 바꾸었을 때 굳이 리 렌더링 할 필요 없는 값을 관리하게 될 때도 있다. 그런 경우에는 useRef를 사용하면 된다. useRef는 이전에 우리가 특정 DOM을 선택해야 될 때 useRef라는 Hook을 사용한다고 공부했다. 이것외에도 컴포넌..
React(리액트): 배열 렌더링, key 사용 리액트에서 배열을 렌더링 해야 할 때 어떻게 하는지 알아보자. const users =[ { id: 1, username: 'paboke22', email: 'paboke22@gmail.com' }, { id:2, username: 'tester', email: 'tester@example.com' }, { id: 3, username: 'liz', email: 'liz@example.com' } ]; 먼저, 다음과 같이 객체를 원소로 가진 배열이 있다. 일단 비효율적인 방법으로 구현해보고 효율적인 방법으로 구현을 해보자. UserList.js import React, { useState } from 'react' function UserList() { const users =[ { id: 1, user..
구현: 아이디어를 코드로 바꾸는 구현 코딩 테스트에서 구현(implementation)이란 '머릿속에 있는 알고리즘을 소스코드로 바꾸는 과정'이다. 어떤 문제를 풀든 간에 소스코드를 작성하는 과정은 필수이므로 구현 문제 유형은 모든 범위의 코딩 테스트 문제 유형을 포함하는 개념이다. 그런 의미에서 알고리즘 교재에서는 대부분 구현을 별도의 유형으로 다루지 않지만, 취업을 목표로 하는 코딩 테스트에서는 구현이 중심이 되는 문제가 자주 출제되기에 다른 알고리즘을 배우기 전에 먼저 다루고자 한다. 이 책에서는 완전 탐색, 시뮬레이션 유형을 모두 '구현' 유형으로 묶어서 다루고 있다. 완전 탐색은 모든 경우의 수를 주저 없이 다 계산하는 해결 방법을 의미하고, 시뮬레이션은 문제에서 제시한 알고리즘을 한 단계식 차례대로 직접 수행해야 하는 문제 유형을..
React(리액트): useRef로 특정 DOM 선택하기 HTML과 JavaScript를 사용할 때에는 우리가 특정 DOM을 선택해야 하는 상황에 getElementById() 또는 querySelector() 같은 DOM select 함수를 사용해서 DOM을 선택한다. 리액트를 사용하는 프로젝트에서도 가끔씩 DOM을 선택해야 하는 상황이 생길 수 있다. 예를 들어 특정 element의 크기나 위치를 가져와야 하는 경우, 아니면 스크롤바 위치를 가져오거나 설정해야 하는 경우, 포커스를 설정해줘야 하는 경우 등 다양한 상황들이 있을 수 있다. Chart.js와 같은 그래프 관련 라이브러리를 사용하게 될 때에도 특정 DOM에 라이브러리를 적용하기 때문에 DOM을 선택해야 하는 상황이 발생할 수 있다. 그럴 때는 리액트에서 'Ref'라는 것을 사용한다. 함수형 컴포..
React(리액트): input 상태 관리하기, input 여러 개 input 상태 관리하기 이번에는 리액트에서 input상태를 어떻게 관리하는지 알아보도록 하자. InputSample.js import React from "react"; function InputSample() { return ( 초기화 값: 어쩌고저쩌고... ); } export default InputSample; 다음과 같이 입력한 것이 '값:'에 표시되고 초기화를 누르면 입력창이 비워지는 예제를 통해 알아보자. 이전에는 onClick이라는 이벤트를 관리했는데 이번에는 input에서 onChange라는 이벤트를 관리해 볼 것이다. import React from "react"; function InputSample() { const onChange = (e) => { console.log(e.ta..
React(리액트): useState를 통한 동적 상태 관리 지금까지 만들어봤던 리액트 컴포넌트들에는 동적인 부분이 하나도 없었다. 값이 바뀌는 일이 없었던 것. 이번에는 컴포넌트에서 보여주어야하는 내용이 사용자와의 intercation에 따라 바뀌어야 할 때 어떻게 구현할 수 있는지에 대하여 알아보자. 리액트 16.8이전 버전에서는 함수형 컴포넌트에서는 상태 관리를 할 수 없었다. 그런데 리액트 16.8에서 'hooks'라는 기능이 추가되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다. 이번에는 'useState'라는 함수를 사용해 볼 건데, 이게 바로 리액트의 hooks 중 하나다. 정말 진부한 예제 중 하나인 버튼을 누르면 숫자가 바뀌는 카운터를 만들어 useState함수를 알아보자. Counter.js function Counter() { retu..
React(리액트): 조건부 렌더링 조건부 렌더링이란, 특정 조건이 참인지 거짓인지에 따라서 다른 결과를 보여주는 것을 의미한다. App.js function App() { return ( ); } App 컴포넌트의 4번 줄에서 Hello 컴포넌트에게 isSpecial을 넘겨준다. * isSpecial={true}를 그냥 isSpecial로 바꾸어도 결과는 동일하다. Hello.js import React from "react"; function Hello({ color, name, isSpecial }) { console.log(name, color); return ( {isSpecial ? * : null} 안녕하세요 {name} ); } Hello.defaultProps = { name: "이름없음", }; export default..
반응형

티스토리툴바