EnJinnier

지금까지 공부한 것을 활용해 블로그를 만들어보는 프로젝트를 진행해보자. 전반적인 FE개발 과정을 담을 계획이다. 1. 기획하기(기능정리)항상 어떤 제품을 개발하기 전에는 기획과 필요한 기능, 전체 디자인에 대해 간단하게 정리해야 한다.이번 미니 블로그에는 다음과 같은 기능이 필요하다. - 글 목록 보기 기능 (리스트 형태)- 글 보기 기능- 댓글 보기 기능 - 글 작성 기능- 댓글 작성 기능 2. 디자인하기전체 화면 디자인을 위와 같이 간단히 정리해둔다. 3. 개발-프로젝트 세팅하기3.1 프로젝트 생성하기Create React App을 사요하여 프로젝트를 생성한다.프로젝트를 만들 폴더에서 터미널을 열고 다음과 같은 명령어를 실행하여 미니 블로그라는 이름의 React 애플리케이션을 생성한다.$ npx cr..

styled-components: CSS 문법을 그대로 사용하면서 결과물을 스타일링된 컴포넌트 형태로 만들어주는 오픈소스 라이브러리(리액트 개발에 많이 사용됨).스타일드 컴포넌트를 사용하기 위해서는 프로젝트에 설치해주어야 함1. styled-components 설치하기2. styled-component의 기본 사용법 2-1. import styled from 'styled-components'; 코드 추가2-2. tagged template literal을 사용하여 구성요소의 스타일을 지정함 템플릿 리터럴은 리터럴(변하지 않는 상수값)을 템플릿 형태로 사용하는 문법이며 ``(백틱스)를 사용하여 작성하고 그 안에 대체 가능한 익스프레션을 넣는 방법이다.템플릿 리터럴은 Untagged Template Lit..

상태와 관련된 대표적인 selector 레이아웃 설정 : display 속성대표적으로 위 코드에 나온 값들이 가장 많이 사용된다.- none: 자바스크립트 코드에 많이 사용- block: 새로운 줄에서 시작하여 위치한 곳 전체의 width를 차지함- inline: 모든 width, height 관련 속성들은 효과가 없음 visibility: 엘리먼트를 화면에 보여주거나 감추기 위해 사용하는 속성position: 엘리먼트를 어떻게 위치시킬 것인지 정의하기 위해 사용(absolute의 기준: 엘리먼트의 첫번째 상위 엘리먼트) 가로, 세로 길이와 관련된 속성 Flexboxdisplay: flex; 로 설정 했을때 사용하는 배치방식Flow direction-row/column에 따라 main axis와 cros..

본격적으로 컨텍스트를 사용하기 위해 리액트에서 제공하는 컨텍스트 API를 알아보자. 1. 컨텍스트 생성하기 : React.createContext() 함수 사용위 코드 작성시 컨텍스트 객체가 생성된다.리액트에서 렌더링이 일어날 때 컨텍스트 객체를 구독하는 하위 컴포넌트가 나오면 현재 컨텍스트의 값을 가장 가까이에 있는 상위 레벨의 Provider로부터 받아오게 된다. 그런데 만약 상위 레벨에 매칭되는 프로바이더가 없다면 이 경우에만 기본값이 사용된다. 2. 하위 컴포넌트들이 해당 컨텍스트의 데이터를 받을 수 있도록 설정하기 : Context.Provider모든 컨텍스트 객체는 Provider라는 React 컴포넌트를 갖고 있다.Context.Provider 컴포넌트로 하위 컴포넌트들을 감싸주면 모든 하위..

Context란?기존의 리액트 컴포넌트들 사이에서 데이터를 props를 통해 전달하는 방식을 사용하면 여러 컴포넌트에 걸쳐 굉장히 자주 사용되는 데이터의 경우 코드도 너무 복잡해지고 사용하기에 불편함이 많았다.따라서 데이터를 props 통해 전달하는 방법 대신 컴포넌트 트리를 통해 데이터를 곧바로 컴포넌트로 전달하는 새로운 방식을 말한다.컨텍스트를 사용하면 일일이 props로 전달할 필요 없이 위 그림처럼 데이터를 필요로 하는 컴포넌트에 곧바로 데이터를 전달할 수 있다.따라서 코드도 매우 깔끔해지고 데이터를 한 곳에서 관리하기 때문에 디버깅을 하기에도 굉장히 유리하다. 그렇다면 언제 컨텍스트를 사용하는 것이 좋을까?여러 컴포넌트에서 자주 필요로 하고 접근해야 하는 데이터로는 사용자의 로그인 여부, 로그인..

컴포지션과 inheritance(상속)은 둘 다 리액트 컴포넌트를 구성하는 방법 중 하나이다.상속은 실제로 많이 사용되지 않으므로 컴포지션에 대해서만 알아보자. Composition: 합성. 여러개의 컴포넌트들을 묶어서 사용한 것.그렇다면 여러개의 컴포넌트들을 어떻게 조합할 것인가? 조합 방법에 따라 컴포지션의 사용 기법이 나뉘는데 대표적인 컴포지션 사용 기법에 대해서 알아보자.Composition - Containment: 하위 컴포넌트를 포함하는 형태의 합성 방법사이드바나 다이얼로그 같은 박스 형태의 컴포넌트는 자신의 하위 컴포넌트를 미리 알 수 없다.(해당 컴포넌트를 사용하는 개발자가 어떤 것을 넣느냐에 따라 하위 컴포넌트가 달라지기 때문에)따라서 이런 경우 컨테인먼트 방법을 사용하여 컴포지션을 사..

Lifting state up : 여러 개의 컴포넌트들 사이에서 state를 공유하는 방법-> 하나의 데이터를 여러개의 컴퓨터에서 사용(표현)해야 하는 경우,각 컴포넌트의 스테이트에서 데이터를 각각 보관하는 것이 아니라가장 가까운 공통된 부모 컴포넌트의 스테이트를 공유해서 사용한다. Shared state : 어떤 컴포넌트의 스테이트에 있는 데이터를 여러 개의 하위 컴포넌트에서 공통적으로 사용하는 경우를 말함.예를 들어, 위와 같은 경우 자식 컴포넌트들이 각각 온도값을 갖고 있을 필요 없이 그냥 부모 컴포넌트의 state에 있는 섭씨 온도값을 변환해서 표시해주면 된다. 이 경우를 이용해 사용자로부터 온도를 입력받아서 각각 섭씨 온도와 화씨 온도를 표현해주고 해당 온도에서 물이 끓는지 안 끓는지를 출력해주..

Form 이란?양식. 텍스트 입력 뿐만 아니라 체크박스나 셀렉트 등 사용자가 무언가 선택을 해야 하는 것 모두.사용자로부터 입력을 받기 위해 사용하는 것React 폼 : 컴포넌트 내부에서 state를 통해 데이터를 관리HTML 폼 : 엘리먼트 내부에 각각의 state가 존재Controlled Components사용자가 입력한 값에 접근하고 제어할 수 있도록 해주는 컴포넌트리액트가 통제함. -> 컨트롤드 컴포넌트는 그 값이 리액트의 통제를 받는 input form element위 그림의 왼쪽은 HTML 폼, 오른쪽은 Controlled 컴포넌트이다.html 폼에서는 각 엘리먼트가 자체적으로 스테이트를 관리한다.따라서 input, textarea, select 태그가 각각 내부의 스테..

List 란? 같은 아이템을 순서대로 모아 놓은 것 리스트를 위해 사용하는 자료 구조가 배열. React에서는 이 배열을 사용해서 리스트 형태로 엘리먼트들을 렌더링 할 수 있음. Key란? 각 객체나 아이템을 구분할 수 있는 고유한 값 React에서의 key는 리스트에 존재하는 아이템들을 구분하기 위한 고유한 문자열을 의미함. 여러 개의 Componenet 렌더링 하기 React에서는 앞에서 나온 배열과 키를 사용하여 반복되는 여러 개의 컴포넌트들을 쉽게 렌더링 할 수 있다. 같은 컴포넌트를 화면에 반복적으로 나타내야 하는 경우, 동적으로 화면의 내용이 바뀌는 경우에는 map()함수를 사용한다. map() 배열에 들어있는 각 변수에 어떤 처리를 한 뒤 리턴하는 것. 예시를 보자. const doubled..

Conditional Rendering 이란? : 조건부 렌더링(조건에 따른 렌더링). 어떠한 조건에 따라서 렌더링이 달라지는 것을 의미함. (*condition: 조건. 프로그래밍에서 사용하는 조건문 같은 것) 조건부 렌더링의 예) 조건문의 값이 true이면 버튼을 보여주고 false이면 버튼을 가리는 것. function UserGreeting(props) { return 다시 오셨군요!; } function GuestGreeting(props) { return 회원가입을 해주세요.; } 위의 두 함수 컴포넌트를 조건부 렌더링을 사용하여 회원인지 아닌지에 따라 선택적으로 보여주는 코드는 다음과 같다. function Greeting(props) { const isLoggedIn = props.isLo..