스터디/React (4) 썸네일형 리스트형 React Ref 개념과 사용하는 방법 목차 Ref란 무엇인가 Ref 사용 시에 주의해야 하는 점 Ref는 언제 사용해야 할까 Ref 사용하는 방법 1. Ref란 무엇인가 Ref를 한 줄로 간단하게 설명하면 아래와 같이 이야기 할 수 있다. Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 직접 접근하는 방법 일반적은 React 데이터 플로우에서 데이터는 부모에서 자식으로만 전달 될 수 있다. 하지만 가끔 이러한 데이터 플로우에서 벗어나야 하는 경우가 있을 수 있다. 이럴 때 Ref를 사용하여 직접 DOM 앨리먼트나 컴포넌트의 인스턴스에 접근할 수 있다. DOM 노드나 엘리먼트에 직접 접근하려면 id를 사용하면 되지 않나? 생각할 수도 있다. 우리가 흔히 아는 document.getElementById($아이디 이름).. CSS 라이브러리를 사용하는 이유 (css scope) 목차 Vanilla CSS 사용 시 발생하는 문제 스코프가 지정되지 않는 문제 해결하기 스타일 적용이 안 되고 줄이 그어져 있는 경우 Vanilla CSS 사용 시 발생하는 문제 Vanilla CSS로 코드를 작성할 때 주의해야 할 점이 있는데, 바로 Scope(범위) 문제이다. 다음의 코드를 살펴보면 scope 문제가 어떤 것인지 알 수 있다. // Button.css .big {width: 100px;} .small {width: 50px;} .button { height: 30px; background-color: #525252; } // Button.js import React from 'react' import './Button.css' export default function Button({.. JSX란? / JSX 문법 정리 JSX란? 자바스크립트에 XML을 추가한 확장문법 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다. 브라우저는 JSX 문법을 이해하지 못한다. 따라서 브라우저에서 실행되기 전에 Babel을 사용하여 일반 자바스크립트 코드로 변환된다. | JSX 문법의 장점 편하게 렌더링이 가능하다. HTML 코드와 유사해서 보기 쉽고 익숙하다. 컴포넌트를 HTML태그 쓰듯이 사용하면서 활용도가 높다. | JSX 문법 정리 1. 리액트 컴포넌트 여러개는 꼭 하나의 빈(또는 div) 태그로 감싸주어야 한다. function App() { return ( div태그 ); } Virtual DOM에서 컴포넌트 변화를 감지할 때 효율적으로 비교하기 위해서, 컴포넌트 내부는 하나의 DOM트리 구조로 이.. 리액트에서 인라인 스타일 작성하는 방법 | CSS 적용 방법 알다시피 CSS를 적용하는 방법에는 세 가지가 있다. 1. 인라인 스타일 : html태그마다 style속성으로 CSS 코드를 작성하는 방식 내용 2. 내부 스타일 시트 : head태그 안에 style태그를 넣어 태그 안에 css 코드를 작성하는 방식 3. 링킹 스타일 시트 : 외부 .css 파일에 css코드를 작성한 뒤, html 문서에 연결하는 방식 | JSX 문법으로 인라인 스타일 작성하기 이 중 첫 번째 방법인 인라인 스타일을 리액트에서 JSX 문법으로 작성할 때 주의해야 할 사항이 있다. 그것은 바로 ‘중괄호를 2개 써야 한다는 것’ !! 예를 들어, 아래와 같이 버튼 컴포넌트를 만들고 style 속성을 작성할 때, 다음과 같이 작성하면 오류가 난다. function Btn(.. 이전 1 다음
