코딩연습장

//App.js import React from 'react'; import './App.css'; function App() { return ( 감자 고구마 오이 가지 옥수수 ); } export default App; //App.css .app-wrap { //내부 간격주기 padding: 100px; //배치방식, 가로방향 display: flex; //안의 요소들 사이의 거리 gap: 12px; } .app-item { //가로 width: 100px; //세로 height: 100px; //경계선처리 border: 1px solid lightgreen; //경계선 구석 둥글게 border-radius: 10px; //배치방식, 가로방향 display: flex; //수직축 방향 정렬, 가운데정렬..

import React, { useState } from 'react'; function App() { const [counter, setCounter] = useState(0); function onClickCounter() { setCounter(counter + 1); } function onClickdisCounter() { setCounter(counter - 1); } return ( {counter} + {/* 익명함수사용 */} { setCounter(counter + 1); }} > + - {/* 익명함수사용 */} { setCounter(counter - 1); }} > - ); } export default App; 나는 function을 직접 만들어서 onClick에 넣었는데, 강사..

컴포넌트는 리액트의 핵심 빌딩 블록 중 하나입니다. 즉 리액트에서 개발할 모든 애플리케이션은 컴포넌트라는 조각으로 구성됩니다. 컴포넌트는 UI구축작업을 쉽게 만들어줍니다. 컴포넌트는 화면의 특정부분이 어떻게 생길지 정하는 선언체입니다. 리액트 컴포넌트가 선언체라는 개념은 아주 중요한데, 그 이유는 리액트의 컴포넌트기반 개발 이전에는 브라우저에서 동적으로 변하는 UI를 표현하기 위해 직접 DOM객체를 조작하는 명령형 프로그래밍 방식으로 구현했습니다. 명령형은 어떻게(How)를 중요시해 프로그램의 제어의 흐름과 같은 방법을 제시하고 목표를 명시하지 않는 형태입니다. 선언형은 무엇(What)을 중요시 여겨 제어의 흐름보다는 원하는 목적을 중요시여기는 형태입니다. DOM(명령형 프로그래밍) 명령형으로 작성된 코..

객체, 배열, 함수의 불변성을 지키면서 값을 수정할 수 있는 메서드는 어떤게 있을까? 1) 배열 위에서 말했듯이, 불변성이 없는 데이터이다보니 값이변했을때 리렌더링하기위해 불변성을 지켜주며 값을 바꿔야한다. 1) 배열 값 추가하기 배열 값을 변경할 때에는 불변성을 지켜줘야한다. 배열의 push, splice, sort등의 함수를 사용하면 안된다. 배열을 수정하는 방법에는 2가지가 있다. spread operator(...), concat()을 사용하는 방법이다. 먼저 spread operator setUsers([...users, newUser]); 기존의 배열을 수정하지 않고, 새로운 요소가 추가된 배열을 만들어내는 방식이다. concat()함수 사용 setUsers(users.concat(user))..

useState + onClick import React, { useState } from "react"; function App() { const [name, setName] = useState("길동이"); function onClickHandler() { setName("누렁이"); } return ( {name} 버튼 ); } export default App; State값을 '길동이'로 초기값을 만듭니다. 버튼에서 onClick에 반응할 함수를 만듭니다. 함수안에서 setName을 이용하여 onClick됐을 시 State값을 변경하도록 만들어 줍니다. 반환값에서 { name }으로 현재 적용되어있는 name값을 출력해줍니다. button에 onClick함수를 적용하여 버튼 클릭 시 onClick..

Hook이란 기존 class바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있게 하는 기능입니다. useState() - State만들기 / 한개를 만들거나 여러번 사용하여 다른 이름의 State를 만들 수 있다. useEffect() - 컴포넌트 안에서 데이터를 가져오거나 구독하고, DOM을 직접 조작하는 작업같은 side effect를 수행할수 있게한다. useContext() - 컴포넌트를 중첩하지 않고도 React context를 구독할 수 있게 해준다. useReducer() - 복잡한 컴포넌트들의 state를 reducer로 관리할 수 있게 해준다. Hook 사용규칙 1) 최상위에서만 Hook을 호출해야합니다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행..

State란 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. 앞에서는 name을 const name = "김민재";라고 작성했는데, 만약 name이 바뀌어야 하는 값이라면, state로 생성해야한다. State를 만들때는 useState()를 사용한다. import React, { useState } from 'react'; function GrandFather() { const [name, setName] = useState("김할아"); // 이것이 state! return ; } 위와같이 useState()를 사용하여 State값을 "김할아"로 만들었다. 앞으로 이런 기능들을 '훅'(Hook)이라고 말하겠다. useState()훅을 사용하는 방식은 아래와 같다. const [ value, setVa..

import React from 'react'; function Child({ name }){ return 내 이름은 {name} 입니다. } export default Child 위와같은 코드를 실행하면, name에 지정된 값이 없기때문에 "내이름은 입니다"가 출력된다. 따라서 기본 props를 지정해주어 특정 문구가 출력되도록 한다. 부모 컴포넌트에서 props를 보내주지않아도 설정될 초기 값이 defaultProps이다. // components/Child.js import React from 'react'; function Child({ name }) { return 내 이름은 {name} 입니다. ; } Child.defaultProps = { name: '기본이름', }; export defa..

1. 태그는 꼭 닫는다. function App() { return ( ); } input 태그에 닫기 / 를 사용하지 않아, 오류가 발생한다. 따라서 input태그에도 닫기 /를 사용하자. function App() { return ( ); } 2. 무조건 1개의 엘리먼트를 반환한다. return ( 안녕하세요! 리액트 반입니다 :) ); 위와같이 작성하면 반환값이 한 컴포넌트에서 태그와 태그 두개 이기때문에 오류가 발생한다. 따라서 두개를 한 태그로 묶어야한다. return ( 안녕하세요! 리액트 반입니다 :) ); 3. JSX에서 javascript값을 가져오려면 중괄호를 사용한다. const cat_name = 'perl'; return ( hello {cat_name}! ); cat_name은 ..

렌더링 : html요소(element), React요소 등의 코드가 눈으로 볼 수 있도록 그리는 것. element는 react의 가장 작은 단위로, 화면에 표시할 내용을 담고있고, 일반 객체이며 쉽게 생성할 수 있다. react DOM은 react element와 일치하도록 DOM을 업데이트 한다. function tick() { const element = ( Hello, world! It is {new Date().toLocaleTimeString()}. ); React.DOM.render(element, document.getElementById('root')); } setInterval(tick,1000); React 요소가 DOM node에 추가되면서 화면에 렌더되려면 ReactDOM.rend..