웹개발 공부방

Map을 이용한 렌더링 arr.map(i => ) 의 형태로 하위 컴포넌트에게 값을 전달해줍니다. map() 함수는 배열안에 있는 각 원소를 변환하여 새로운 배열을 만들어줍니다. 리액트에서 동적인 배열을 렌더링해야 할 때는 이 함수를 사용하여 일반 데이터 배열을 리액트 엘리먼트로 이루어진 배열로 변환해주면 됩니다. 리액트에서 배열을 렌더링 할 때에는 key 라는 props 를 설정해야합니다. key 값은 각 원소들마다 가지고 있는 고유값으로 설정을 해야합니다. 만약 배열 안의 원소가 가지고 있는 고유한 값이 없다면 index 를 key 로 사용하시면 됩니다. Map에서 Key가 필요한 이유 Map에 key 값이없다면 중간의 값이 바뀌었을때 그 하위 값들이 전부 변하기 때문입니다. key값을 사용한다면 k..

useRef - 특정 DOM 선택 javascript에서 특정 Dom을 선택하는 역할을 하는 getElementById, querySelector와 같다. 원하는 위치에 ref={} 의 형태로 작성하면 된다. 포커스를 잡으려면 nameInput.current.focus() 형태로 작성하면 된다. 전에 만든 InputSample.js 에서 이름과 닉네임을 초기화하면 이름 input에 포커스가 가도록 설계해봅시다. // InputSample.js import React, { useState, useRef} from 'react'; function InputSample() { const [inputs, setInputs] = useState({ name: '', nickname: '', }); const na..

input 상태 관리하기 input의 onChange를 사용하면 이벤트 객체 e를 파라미터로 받아올 수 있다. 이 객체의 e.target은 이벤트가 발생한 DOM을 가리킨다. e.target.value를 조회하면 현재 input의 value값을 알 수 있다. 먼저, InputSample.js파일에 InputSample컴포넌트를 생성합니다. // InputSample.js import React, {useState} from 'react'; function InputSample() { const [text, setText] = useState(''); const onChange = (e) => { setText(e.target.value); // 입력하는 값이 하단 값에 나타나게 함 }; const onR..

useState를 통해 인터렉션 구현하기 먼저, Counter.js 파일을 만들어줍니다. (버튼을 누르면 숫자가 바뀌는 Counter 컴포넌트) // Counter.js import React, { useState } from 'react'; // 리액트 패키지에서 useState 라는 함수를 불러와줍니다. function Counter () { // const [현재상태, Setter함수] = useState(기본값); const [number, setNumber] = useState(0); const Increase = () => { console.log('+1'); // setNumber(number + 1); // 이렇게 함수형으로 파라미터를 넘겨주면 상태값 변경을 배치로 처리한다. setNumb..

조건부 렌더링이란, 특정 조건에 따라 다른 결과물을 렌더링 하는 것을 의미합니다. // App.js import React from 'react'; import Hello from './Hello.js'; import Wrapper from './Wrapper.js'; function App() { return ( {/* Hello 컴포넌트를 사용할 때, isSpecial 이라는 props를 설정 */} { /* isSpecial 만 써도 isSpecial={true}로 간주함 */ } ); } export default App; // Hello.js import React from 'react'; function Hello({ color, name, isSpecial }) { return ( { /* ..

props의 기본 사용법 props는 properties의 줄임말입니다. 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props를 사용합니다. Hello 컴포넌트를 사용 할 때 name이라는 값을 전달하고자 할 때, 이렇게 코드를 작성합니다. // App.js import React from 'react'; import Hello from './Hello'; function App() { return ( //Hello 컴포넌트를 사용 할 때 name 이라는 값을 전달하자 ); } export default App; Hello 컴포넌트에서 name 값을 사용하고 싶을 때, 이렇게 코드를 작성합니다. // Hello.js import React from 'react'; function Hello(props)..

JSX는 리액트에서 생김새를 정의할 때, 사용하는 문법입니다. HTML 같이 생겼지만 실제로는 JavaScript를 확장한 문법입니다. 1. 사용자 정의 컴포넌트는 대문자로 시작해야 합니다. // Hello.js import React from 'react'; // hello가 아니라 Hello로 표기 function Hello() { return ( 안녕하세요 ); } export default Hello; 2. 모든 태그는 꼭 닫혀있어야 합니다. // App.js import React from 'react'; import Hello from './Hello'; function App() { return ( ); } export default App; 3. 두 개 이상의 태그는 무조건 하나의 태그로 ..

Mac 에서 새로운 React 프로젝트를 만들어보겠습니다. 1. 터미널을 열어서 현재 위치를 확인합니다. (윈도우 사용자는 Git Bash 를 사용하세요. 사용 명령어가 다를 수 있습니다.) $ pwd 2. 원하는 위치로 이동합니다. (저는 desktop으로 이동했습니다.) $ cd desktop 3. 폴더를 만들어 줍니다. (저는 'React'라는 이름의 폴더를 만들었습니다.) $ mkdir React 4. 생성된 폴더('React' )로 이동합니다. $ cd React 5. 리액트 프로젝트를 만들어 줍니다. (저는 'react-start'라는 이름의 프로젝트를 만들었습니다.) react-start 라는 디렉터리가 생기고 그 안에 리액트 프로젝트가 생성됩니다. npx create-react-app re..

[Mac] Node.js 설치하기 window 사용중인 분들은 Node.js 공식 홈페이지에서 다운로드하면 됩니다. 1. 터미널을 실행합니다. 2. Homebrew 를 설치합니다. Homebrew는 맥에서 개발환경 세팅을 할 때 가장 먼저 설치해야 할 패키지 관리 프로그램입니다. ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 3. Node 를 설치합니다. brew install node 4. 설치 완료 후 노드 버전을 확인합니다. node -v npm -v [Mac] Yarn 설치하기 5. 이미 위에서 node를 설치하였으므로 --ignore-dependencies 옵션을 이용해 node 를..