Category: React

2019
0
Front-endReact

React 12일차

BEM(Block, Element, Module)클래스 이름에 _나 -로 계층 구조를 나눈다.영역이름__ element이름 ModifiersModifier은 block 또는 element의 상태이다 어디에 밑줄, 오디에 하이픈 써야 하는지 알면 됨 React에서 BEM을 사용할 때는 컴포넌트가 블록이기 때문에 ex) PostListtitle, Post

0
Front-endReact

React 11일차

고차 컴포넌트 (Higher-Order Components) 컴포넌트를 받아서 컴포넌트를 반환하는 그저 함수일 뿐이다 컴포넌트x. 함수가 컴포넌트가 되려면, 컴포넌트가 아니라 엘리먼트를 반환해야 한다. 횡단 관심사(Cross-Cutting Concerns)를 위해 HOC 사용하기코드는 자세히 읽지 x 12345678const CommentListWithS

0
Front-endReact

React 10일차

합성 (composition) vs 상속 (inheritance)다른 컴포넌트를 담기게시판에 적용 헤더의 메뉴바에 하이라이트를 주는 등 페이지별로 달라야하는 부분이 있기 때문에App.js에 레이아웃을 두지 x -> Layout.js를 따로 만들면 확장성이 좋음 헤더, 푸터 뭔가를 감싸는 컴포넌트 만들고 싶을 때 레이아웃 뿐만이 아니라 뭔가 빈칸이

0
Front-endReact

React 9일차

제어되지 않는 컴포넌트제어되지 않는 컴포넌트는 진리의 원천(유일한 진리의 원천x)을 DOM에 두기 때문에,React를 사용한 코드와 사용하지 않은 코드를 통합하는 작업을 좀 더 쉽게 만들어줄 수 있습니다. 기본값 지정하기 value 속성을 이용하면, 제어되는 컴포넌트가 됨 defaultValue를 이용하면, 기본값을 주면서도 사용자가 편집 가능 (기본값도

0
Front-endReact

React 8일차

JSX 더 알아보기 문법 설탕(syntatic sugar): 무언가를 문법적으로 쉽게 만든 것 .createElement()의 반환값은 객체다.가 중요 React 엘리먼트의 타입 지정하기<div/><Div/>는 리액트에서 다르게 동작대문자로 시작하는 타입은 해당 JSX 태그가 React 컴포넌트임을 가리킨다. 그러니까, <

0
Front-endReact

React 7일차

리스트와 키 React element가 들어있지 않은 배열로부터 React element가 들어있는 배열을 만들 수 있다.-> 화면에 바로 그릴 수 있다. 기본적인 목록 컴포넌트 Warning: 에러는 아니지만, 코드에 문제가 있으니 확인해야 한다. map 메소드를 사용할 때는 key를 써줘야 한다. 키 키를 지정해주면 어떤 아이템이 바뀌었는지

0
Front-endReact

React 6일차

조건부 렌더링&& 논리 연산자를 사용해 if를 인라인으로 넣기 React는 문자열, 숫자는 잘 그려주는데, true, false, null 등은 화면에 안 그려준다. &&는 앞의 코드가 falsy이면 앞의 걸 반환하고, 앞의 코드가 true이면 뒤의 걸 반환한다. 12345678910111213141516171819202122

0
Front-endReact

React 5일차

이벤트 제어하기 함수 안에서 함수를 정의할 수 있다. onClick={handleClick}의 {}안에 함수를 정의해도 되고, 밖에서 정의하고 안에 함수 이름을 써줘도 됨 123456789101112function ActionLink() { function handleClick(e) { e.preventDefault(); c

0
Front-endReact

React 3일차

요소(element) 렌더링요소는 React 앱에서 가장 작은 단위의 재료입니다. 요소는 화면에 표시하고자 하는 내용을 서술합니다. React는 element를 받아서 화면에 그려주는 기능을 하는 라이브러리 브라우저 DOM 요소와 달리, React 요소는 순수한 객체이며 생성 비용이 저렴합니다. 생성 비용? ex) video태그, img태그 등은 비용이

0
Front-endReact

React 2일차

JSX 소개 JSX로 만든 엘리먼트는 변수에 담을 수 있고, 함수의 매개변수로도 사용할 수 있다. 왜 JSX인가?JSX에 표현식 포함하기 JSX 안에 자바스크립트 표현식 을 중괄호로 묶어서 포함시킬 수 있다. 예를 들어, 2 + 2, user.firstName, formatName(user) 를유효한 표현식으로 표현하면 아래와 같이 표현한다. 12345