리액트를 어느 정도 학습한 분들이라면 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는 ..
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 - 값 전달 방식 Props Props란? props는 properties의 줄임말입니다. 우리가 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props를 사용합니다. 또한 각 컴포넌트가 비슷하지만 다른 속성을 가지고 있을 때 리액트에서는 함수 컴포넌트 혹은 클래스 컴포넌트를 이용하여 그 값을 전해주고 표시합니다. Props의 기본 사용법 어떠한 컴포넌트를 이용하여 "안녕하세요 name"이라는 내용을 표시하고 싶을 때 아래의 Hello.js 와 같이 작성해줍니다. //Hello.js import React from 'react'; function Hello(props) { return 안녕하세요 {props.name} } export default Hello; 이제 이름을 위해 다른 컴포넌트를..
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'); //수량 플러스, 마이너스 버..
🚀 새로운 블로그로 이전했습니다.
살펴보러 가기
