[React] props와 state

* 리액트는 컴포넌트로 구성되며, 하나의 컴포넌트는 부모로부터 전달된 props를 바탕으로 DOM을 렌더링하기 위해 element들을 조합하여 render한다. * 또한 컴포넌트는 필요에 따라 값을 내부적으로 변경하기 위해 state를 갖는다. 1. props properties의 줄임말로 상위 컴포넌트(부모)가 하위 컴포넌트(자식)에 값을 전달하기 위한 방법으로 단방향 데이터 흐름 이 프로퍼티는 하위 컴포넌트 즉, 전달 받은 컴포넌트에서 수정이 불가 외부에서 전달되는 값으로 변경이 불가능한 특징을 가짐 2. props입력과 출력 - 자식 컴포넌트를 부르는 부모 컴포넌트에서 속성으로 prop를 입력할 수 있다. - 상위 컴포넌트(부모)에서 하위 컴포넌트(자식)에게 prop을 입력을 했기 때문에 DOM을 ..

[React] 컴포넌트(Component)와 생명주기(LifeCycle)

1. 컴포넌트(Component) 리액트에서 컴포넌트는 Props와 State를 가지는 Object이다. 컴포넌트는 props를 외부에서 입력으로 받고 컴포넌트에서 엘리먼트를 조합하여 렌더링을 위한 DOM을 출력으로 반환하는 객체 즉, 부모로부터 전달된 props를 받아 DOM을 출력으로 반환한다. 리액트 엘리먼트 - React 엘리먼트는 , 과 같은 하나의 DOM에 해당하는 요소를 의미 따라서 리액트에서 엘리멘트들이 모인 구조가 하나의 컴포넌트를 의미한다. 엘리먼트들을 모아 모듈화한 재사용 가능한 크기의 집합을 컴포넌트라고 할 수 있다. 2. 컴포넌트 종류 클래스형 컴포넌트 - 리액트 초기의 컴포넌트 방식(구식) - 클래스형은 React.Component를 상속받기 때문에 import React fro..

[React] JSX이란? (정의, 주의 사항, 관련 문법)

1. JSX(JavaScript XML) JavaScript에 XML 개념 및 문법을 추가한 JavaScript 개발 문법이다. 공식적인 개발 방법이 아니며, 리액트에서만 사용되는 개발 문법이다. JavaScript문 안에서 HTML, CSS문이 가능하기에 편리하다. 2. JSX 주의 사항 및 관련 문법 반드시 부모 요소 하나가 감싸는 형태여야 한다. 자바스크립트 표현식 if문(for문) 대신 삼항연산자(조건부 연산자)를 사용 JSX 내에서 주석 사용 방법 3. 반드시 부모 요소 하나가 감싸는 형태 - 부모가 2개 이상이면 오류가 발생한다. - 반드시 부모는 1개로 만든다. - 이것의 해결 방법으로는 , 가 있다. 4. 자바스크립트 표현식 - JSX 안에서도 자바스크립트 표현식을 {}을 감싸 주어야 사용..

[React] DOM과 Virtual DOM

1. 문서 객체 모델(DOM) https://tadaktadak-it.tistory.com/140 [JavaScript] 문서 객체 모델(DOM) 1. 문서 객체 모델(DOM) - DOM : Document Object Model - 웹 문서의 모든 요소를 자바스크립트를 이용해 조작할 수 있도록 객체를 사용하여 문서를 해석하는 방법 - 웹 문서의 모든 요소들을 객체로 만들고 tadaktadak-it.tistory.com - DOM : Document Object Model - DOM은 HTML과 자바스크립트를 이어주는 공간으로, 내가 작성한 HTML을 자바스크립트가 이해할 수 있도록 객체(object)로 변환 - 웹 문서의 모든 요소를 자바스크립트를 이용해 조작할 수 있도록 객체를 사용하여 문서를 해석하..

[React] React 개요 및 설치, 기본 동작

** 프레임워크 vs 라이브러리 ** 프레임워크는 내가 개발할 때 환경에 종속되어 개발하는 경우를 말함 라이브러리는 내가 개발하는 언어에 추가로 파일을 연결하여 개발하는 경우를 말함 즉, 프레임워크는 미리 만들어진 틀 안에서 그 제한된 환경 안에서 사용하는 것이고 라이브러리는 원래 있는 환경에서 미리 만들어진 것을 가져와서 쓰는 것이다. 1. React(리액트) - 복잡한 사용자 인터페이스(UI)를 쉽게 구축하기 위해 페이스북에서 제작한 javascript로 만든 라이브러리 - React는 웹 브라우저의 UI를 구현하는 라이브러리로 기본적으로 CSS, HTML, JavaScript 개발언어를 이용한 컴포넌트 기반 프론트엔드 라이브러리이다. - React는 state가 변경되면 그 컴포넌트 만 리렌더링이 ..

[CSS] 반응형 웹(viewport, 미디어 쿼리)

1. 반응형 웹 - 다양한 화면 크기의 디바이스(PC, 모바일, 태블릿 등)에서 웹 서비스를 제대로 보여주기 위한 기술 또는 개념 반응형 웹의 일반적인 조건 - 데스크탑, 태블릿, 모바일에 대해 각각의 기기에서 문제없이 동작해야 함 - 사용자가 서로 다른 기기(다양한 크기의 화면)에서 접속시 즉시 반응하여 화면의 내용을 보여주어야 함 2. 뷰포트(viewport) - 일반적으로 모바일 기기에 적용하기 위해 생성된 개념 - 가상의 윈도우(화면)에 웹 페이지를 렌더링하여 확대/축소/스크롤 등을 하기 위한 가상 렌더링 화면 - 기본적으로 데스크탑 브라우저에서는 viewport를 사용하지 않기 때문에 무시됨 데스트탑(viewport) vs 모바일(viewport) - 데스트탑 : 브라우저 창이 곧 viewpor..

[CSS] CSS Flex(Flexible Box) - Items

1. Flex(Flexible Box)의 개념 - Flex는 요소의 크기가 서로 다르거나 동적인 경우 효율적으로 요소를 정리하기 위해 고안된 레이아웃 방법 중 하나 - Flex는 Container와 Item 두가지 개념이 있다. Container Items를 감싸는 부모 요소 박스를 의미 Items 각 요소를 의미하며, 반드시 Container 자식으로 존재해야 함 2. Flex Items 요소의 속성 order Flex Item의 순서를 설정 flex-grow Flex Item의 증가 너비 비율을 설정 align-self 교차 축(cross-axis)에서 아이템의 정렬 방법을 설정 flex flex-grow, flex-shrink.. 축약형 ..... 3. order(row, column) - Flex..

[CSS] CSS Flex(Flexible Box) - Container

1. Flex(Flexible Box)의 개념 - Flex는 요소의 크기가 서로 다르거나 동적인 경우 효율적으로 요소를 정리하기 위해 고안된 레이아웃 방법 중 하나 - Flex는 Container와 Item 두가지 개념이 있다. Container Items를 감싸는 부모 요소 박스를 의미 Items 각 요소를 의미하며, 반드시 Container 자식으로 존재해야 함 2. Flex Container 요소의 속성 display 컨테이너를 수직/수평 방향으로 정렬 flex-direction 아이템들의 주축(main-axis) 정렬 방향(수직/수평)을 설정 flex-wrap 아이템들의 줄묶음(줄 바꿈) 설정 justify-content 주축(main-axis)의 정렬 방법을 설정 align-content 교차 ..

[JavaScript] JavaScript HTML template

1. HTML template - 반복적인 HTML 부분을 화면에서는 보이지 않는 template로 만들어 두고 서버에서 전달되는 JSON과 연결하여 반복적인 tag를 만들어 내는 기법 - 즉, 반복적인 HTML 코드를 template에 넣어놓고 JavaScript를 이용해서 받은 데이터로 교체해주고 HTML로 나타내주는 것이다. - 바꾸고 싶은 데이터 부분을 {icon}, {img}, {title} ...로 해준 다음 JavaScript에서 서버에서 받은 데이터(JSON)의 각 데이터로 replace를 해준다. 그런 다음 원하는 태그 쪽에 appendChild() 해주면 된다. - 여기서 그냥 태그를 appendChild를 해주면 여러 개가 적용이 되지 않는다. - 그래서 태그이름.cloneNode(t..

[JavaScript] JavaScript 함수형 프로그래밍

1. 함수형 프로그래밍 Simple is the Best! 즉, 기능 동작을 위해 간단하고, 간결하고, 간소하게 작성하는 방법론 함수형 프로그래밍은 객체지향 프로그래밍과 비교되는 방법론으로 객체지향 프로그래밍에 비해 더 간결하고, 더 예측 가능하고, 더 테스트하기 쉬운 경향이 있다. 단, 이 장점들이 단순히 함수형 프로그래밍이 객체지향 프로그래밍에 비해 더 쉽다는 것은 아니다. 2. 함수형 프로그래밍의 3대 개념 ① 순수 함수(Pure Function) ② 불변성(Immutable state) ③ 1급 객체(First-class) 3. 순수 함수(Pure Function) - 같은 입력 값이라면, 항상 같은 결과 값을 반환한다. - 외부적인 것에 영향을 받지 않는다. - 예측이 가능해야 한다. 4. 불변..