분류 전체보기 (28) 썸네일형 리스트형 [개념정리 15탄] React State / useState state 컴포넌트 내부에서 바뀔 수 있는 값을 말한다. 그리고 useState라는 Hook함수를 통해 이 state의 상태를 변경해줄 수 있다. function GrandFather() { const [name, setName] = useState("김할아"); // 이것이 state! return ; } 코드처럼 통상 react에서는 구조분해할당 문법을 통해 useState를 선언하고 사용한다. state의 값을 변경하는 방법이 빠질 수 없는데, useState로 state값 변경하는 법 import React, { useState } from "react"; function Child(props) { return ( { props.setName("박할아"); }} > 할아버지 이름 바꾸기 {prop.. [개념정리 14탄] React Props / childern Props란? 부모 컴포넌트로부터 받아온 데이터이며 부모에서 자식으로만 일방통행으로 전달이 가능하다. Props 예시 import React from "react"; function GrandFather() { return ; } function Mother() { const name = "홍부인"; return ; // "props로 name을 전달했다" } function Child(props) { console.log(props); // object 타입이기때문에 안에 속성값인 .motherName으로 불러올 수 있다. return {props.motherName}; // props를 통해 받아오기 } function App() { return ; } export default App; // pro.. [개념정리 13탄] React 컴포넌트 / JSX 컴포넌트(Component) 간단히 설명하면 화면을 구성하는 하나의 단위(블럭)이라 할 수 있다. 예를 들어, 검색 컴포넌트, 로그인 컴포넌트, 상품리스트 컴포넌트, 추천 상품 컴포넌트 등 html 한 페이지를 각각의 컴포넌트로 나누어 작성할 수 있다. 컴포넌트를 사용함에 있어 장점은 계속 재사용이 가능한것, 유지보수가 비교적 쉬운 것, 협업하기 좋은것이 있다. 단점으론 프로젝트 크기가 커질수록 컴포넌트의 갯수가 많아지기 때문에 폴더구조가 복잡할 수 있다. 예시 function App(){ return } 결국 html을 리턴하는 함수가 컴포넌트다. 컴포넌트 코드 보는 방법(CRA 직후 App.js 파일) // 컴포넌트 밖, 필요한 파일 import import logo from "./logo.svg";.. [개념정리 12탄] React 주요 개념 Recat UI(User Interface)를 구축하기 위한 선언적이고 효율적이며 유연한 JS 라이브러리(도구)다. 컴포넌트(Component)라고 불리는 작고 고립된 코드의 블럭을 이용하여 복잡한 UI를 구성하도록 돕는다. SPA를 전제로 하고 있고, 가상DOM을 활용하여 업데이트해야 하는 DOM요소를 찾아서 그 해당 부분만 업데이트한다. 리렌더링이 잦은 동적인 모던 웹에서 빠른 포퍼먼스를 보여줄 수 있다. React의 주요 특징 5가지 컴포넌트 기반 선언형 뷰 JSX Hooks State & Props 컴포넌트 (Component) 개념적으로는 JS함수와 비슷하며 props라고 하는 임의의 입력을 받은 후 화면에 어떻게 표시되는지를 기술하는 React Element를 반환한다. 함수 컴포넌트 데이터를.. [개념정리 11탄]React 시작 전(ES6 문법) React를 시작하기 전에 ES6 문법에 대해 알아야 하는데 6가지 목차 정도는 알고 React를 시작해야 해서 정리하려 한다. 화살표 함수 객체와 배열 구조 분해 할당 함수 인자에서 구조분해 할당 Spread Operator(전개 구문) Rest Operator(나머지 매개변수 구문) map, filter 함수 화살표 함수 자바스크립트에서 기본적으로 함수를 만드는 방법은 2가지 있다. Function 키워드를 사용하는 방법, Arrow function을 사용하는 방법 React에서는 2가지 방법에 큰 차이는 없다. 코딩하는데 본인이 편한 방법을 사용하면 된다. 기본적인 방법으로 function 키워드를 사용해 함수를 정의해보면 // Function keyword (함수 선언식) function sayH.. 항해99 4주차 WIL(State, Props, 리렌더링 발생 조건) state 컴포넌트 내부에서 변경될 수 있는 값이다. props는 부모 컴포넌트가 설정하고, 컴포넌트 자신은 props를 바꾸지 못하는 특성이 있는 것과는 차이가 있다. 리액트에 존재하는 state의 종류는 2가지다. 클래스형 컴포넌트가 가지고 있는 state 함수형 컴포넌트가 useState라는 함수로 사용하는 state 컴포넌트 내부에서 변경하고 싶은 값이 있을 때, state를 활용한다. 클래스형 컴포넌트의 state state의 이름과 초기값을 constructor(생성자)에서 설정하고, render() 함수에서 this.setState 함수를 통해 state를 변경해 줄 수 있다. import React, {Component} from 'react'; class Counter extends Co.. [개념정리 10탄] JavaScript 6번째 느슨한 타입의 동적 언어의 문제점 및 보안할 수 있는 방법 실행 시 변수의 type에 예상치 못한 type error가 발생할 수 있다. 동적 언어는 코드가 길고 복잡할 경우에 런타임 때 확인할 수밖에 없다. 이런 불편함을 극복하기 위해, typescript나 flow 등을 사용하는 방법이 있다. 기본형 데이터와 참조형 데이터 기본형 타입의 종류 = 논리(boolean), 정수(int), 실수(double), 문자(char) 형 타입 참조형 타입의 종류 = 배열(array), 클래스(class), 인터페이스(interface) 형 타입 불편 객체를 만드는 방법 불변 객체를 만드는 방법으로 Object.freeze()라는 함수를 사용하는 방법이 있다. let freezeTest = { water = 'sa.. [개념정리 9탄] JavaScript 5번째 변수의 범위 자바스크립트에서는 객체, 함수가 모두 변수에 담길 수 있다. 변수의 범위는 해당 변수에 접근할 수 있는 영역이다. 1. 지역변수 = 함수 내부에서 선언된 변수, {} 영역 내에서 선언된 변수이다. 지역변수는 변수가 선언된 영역 내에서만 유효하고 그 영역을 벗어나면 메모리에서 사라진다.(삭제된다) 2. 전역변수 = 함수 외부에서 선언된 변수이다. 전역변수는 프로그램의 어느 영역에서나 접근할 수 있으며 웹 페이지가 닫혀야만 메모리에서 사라진다. 문서 객체 모델 (DOM : Document Object Model) XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다. 문서 내의 모든 요소를 정의하고 각 요소에 접근하는 방법들을 제공해준다. document 객체 웹페이지 자체를 의미하는 .. [개념정리 8탄] JavaScript 4번째 배열(Array) 저장공간을 나열해놓은 형태의 자료구조이다. 하나의 이름과 방번호(인덱스)로 참조되는 정렬된 값의 집합이다. 배열요소는 배열을 구성하는 각각의 값이다. 인덱스는 배열에서의 위치를 가리키는 숫자이다. let 배열명 = [값1, 값2, ...]; let 배열명 = new Array(값1, 값2, ...); let 배열명 = []; 배열의 특징 1. 타입이 고정되어있지 않다. let arr = ["안녕", 10, -2.35, true]; 2. 인덱스가 연속적이지 않아도 된다. let arr = []; arr[0] = 10; arr[3] = "친구야"; console.log(arr[3]); // 친구야 Array 객체의 기능(메소드) 배열명.length : 현재 배열의 총 길이(컨텐츠의 갯수) .. [개념정리 7탄] JavaScript 3번째 연산자(operator) 기능이 있는 특수문자 또는 단어를 뜻하며 함수, 키워드들은 연산자가 아니다. 산술연산자의 종류 + (더하기) - (빼기) * (곱하기) / (나누기) % (나머지) ** (제곱) a % b = 나머지 연산자(a를 b로 나눈 나머지값) a ** b = 제곱연산자(a의 b 제곱근) ex) 10 % 3 = 1 비트 연산(2진법) 1 bit = 컴퓨터 용량의 최소 단위이다. 1 byte : 8bit = 메모리의 최소 단위, 데이터의 최소 단위이다. (1KB = 1024Byte, 1MB = 1024KB 등 1024배씩이다.) KB(킬로바이트), MB(메가바이트), GB(기가바이트), TB(테라바이트), PB(페타바이트) 등이 있다. 조건식*매우 중요!* 조건식이란 조건을 제시하는 식으로 .. 이전 1 2 3 다음