리액트를 어느 정도 학습한 분들이라면 key prop에 대해 들어보았을 것이고 이것이 리스트 렌더링 할 때만 사용하는 값이라고 생각할 수 있다. key prop은 조금 더 의미를 가지고 있다. 이번 글은 리액트 공식문서 스터디를 진행하며 스터디원들과 이야기했던 key에 대해 작성하려고 한다. map과 함께 사용하는 key prop React에서는 list를 렌더링하기 위해 map 메서드와 함께 사용한다. 리턴하는 가장 바깥쪽 JSX props로 key 값을 입력하지 않으면 다음과 같은 에러가 발생한다. Warning: Each child in a list should have a unique “key” prop. 그런데 에러가 발생하여도 우리는 화면에 렌더링된 내용을 확인할 수 있다. 이는 React는 ..
1월 5일부터 1월 20일까지 약 2주간 진행된 프로젝트를 기획하고 개발하였습니다. 기획 프로젝트 시작 전에도 여러 가지 아이디어를 제시하고 이에 대해 이야기했었지만 API를 확인한 뒤에는 이를 최대로 활용하고 가능성이 높은 프로젝트들을 브레인스토밍을 통해 도출하였다. 특강에서 보았으나 잘 알지 못했던 신문물(?)에 익숙한 팀원 덕분에 피그잼을 활용하였고 두가지 후보가 있었으나 최종으로 내가 제시한 아이디어가 선택되어 이번 프로젝트에 더욱 책임감이 느껴졌다. 이후 유저스토리를 작성해보며 프로젝트 주요 타겟을 정하고 간단한 사용 시나리오를 작성해 보며 콘셉트를 잡아 나갔다. 프로젝트 소개 🦔 커뮤니케이션을 통한 학습을 제공하는 개발자 전용 SNS 이번 프로젝트 주제는 "React 혹은 Vue.js 이용하여..
React - input 상태 관리법 input 상태 관리 리액트에서는 input의 값을 사용하기 위해 state를 지정하고 변경 또한 이 state 값을 변경해서 사용해야 합니다. 위와 같은 기능을 하는 input 상태 관리 코드입니다. import React, { useState } from 'react'; function InputSample() { const [text, setText] = useState(''); const onChange = (e) => { setText(e.target.value); }; const onReset = () => { setText(''); }; return ( 초기화 값: {text} ); } input의 value가 변할 때마다 onChange 이벤트를 통해 ..
React - 동적인 값 관리 useState useState란? 리액트를 통해 인터랙티프한 페이지 작성을 위해서는 useState라는 리액트 Hooks 중 하나를 사용하는 것이 효율적입니다 import React, { useState } from 'react'; 코드 에디터에 따라 다르지만 자동 입력되거나 직접 디스트럭팅하여 import 합니다. useState 사용법 함수형으로 업데이트하는 방식은 아래와 같습니다. 이해를 돕기 위해 수 증감 기능을 작성했습니다. import React, { useState } from 'react'; const PlusMinus = () => { const [num, setNum] = useState(0); const plus = () => { setNum(previ..
React - Code 작성 방식 JSX JSX란? 리액트에서는 html이 아닌 자바스크립트에서 코드를 작성합니다. 자바스크립트를 html로 변환해줄 도구가 필요합니다. 이때 babel을 사용하게 됩니다. XML 형태로 코드를 작성하면 babel 이 JSX를 JavaScript로 변환을 해줍니다. BABEL에 대한 내용은 https://mxxcode.tistory.com/entry/Webpack과-Babel-JavaScript JSX의 형태 - 컴포넌트에 return 값을 JSX를 통해 구현한다. import React from 'react'; import Hello from './Hello'; function App() { return ( 안녕하세요 ); } export default App; 다른 형..
React - 리액트란, 작동 원리, 개발 환경 구축 리액트란 UI 자바스크립트 라이브러리로 싱글 페이지 애플리케이션이나 모바일 애플리케이션 제작하기 위해 만들어졌고 페이스북(메타)에서 개발하였다. 리액트는 왜 만들어졌을까? 자바스크립트를 통해 HTML의 DOM을 변화시키기 위해 번거로운 작업이 필요했다. 개인적으로 만들었던 수량 증감 버튼을 활용하여 설명하자면 const minusBtn = document.getElementById('quantity-minus'); const plusBtn = document.getElementById('quantity-plus'); const quantity = document.getElementById('quantity-value'); //수량 플러스, 마이너스 버..
🚀 새로운 블로그로 이전했습니다.
살펴보러 가기
