전체적인 정의 CSS - 제일 기본 방식 Sass - 자주 사용되는 css 전처리기 CSS module - 클래스명 중복 방지를 위한 기술, css를 모듈화 한다고 생각 style-components - 스타일을 js파일에 내장하는 방식 가장 흔한 방식, 일반 CSS 소규모 프로젝트에 적합 가장 중요한 것은 CSS 클래스를 중복되지 않게 만드는 것방법 2. CSS selector을 활용 방법 1. 클래스를 특별 규칙을 사용하여 지정 이름 짓는 규칙 React 프로젝트 내에 자동 생성된 App.css이다. 클래스 명을 컴포넌트명-클래스 형태로 짓는다. 이와 비슷한 방법 중에 BEM 네이밍 방식이 있다. BEM 네이밍 방식 정의 : Block, Element, Modifier의 약자로, Block, Elem..

useState useState 는 함수 컴포넌트에서 가변적인 상태를 지닐 수 있게 해줍니다. 만약 함수 컴포넌트에서 상태를 관리해야 한다면 이 Hook을 사용하면 됩니다. useState 의 기본적인 구조 const [value, setValue] = useState(0); 코드를 보면 오른쪽의 useState 를 비구조화 할당으로 배열로 받아왔습니다. 배열과 같이 두개의 원소가 있습니다. 첫 번째 원소는 원소의 상태 값, 두 번째 원소는 상태를 설정하는 함수입니다. 물론 두 원소 모두 원하는데로 네이밍 할 수 있습니다. 쉽게 말해 첫번째 원소로 현재 상태 값을 참조하고, 두번째 원소로 상태 값을 수정한다고 보면 됩니다. 다음 오른쪽 useState 를 보면 파라미터로 초기 값인 0을 설정해준 것을 확..

모든 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재한다. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝난다. 라이프 사이클 메서드가 사용되는 경우 컴포넌트를 처음으로 렌더링할 때 작업을 처리하고 싶은 경우 컴포넌트를 업데이트하기 전후 작업을 처리할 때 불필요한 업데이트를 방지하는 경우 등 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용 가능하다. 함수 컴포넌트에는 이와 비슷한 작업을 처리할 수 있는 Hooks가 있다. 라이프사이클 메서드의 이해 라이프사이클 메서드의 종류는 총 9가지 Will 접두사가 붙은 메서드 : 어떤 작업을 작동하기 전에 실행되는 메서드 Did 접두사가 붙은 메서드 : 어떤 작업을 작동한 후에 실행되는 메서드 라이프사이클의 종류 마..

컴포넌트 반복이 필요한 이유 const IterationSample = () => { return ( 눈사람 얼음 눈 바람 ); }; 위와 같이 태그가 반복적으로 나타나는 것은 문제가 되지 않는 것 처럼 보이지만 코드가 더 복잡해진다면 코드양은 더 늘어나고 파일 용량도 쓸데없이 증가하고 보여 주어야 할 데이터가 유동적이라면 직접 내용을 바꿔 주는 것은 한계가 있기 때문에 저러한 코드로는 절대 관리하지 못합니다. 따라서 자바스크립트 배열의 map() 함수를 통해 반복적인 내용을 효율적으로 보여주고 관리해야 함. 자바스크립트 배열의 map() 함수 map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성합니다. 문법 arr.map(cal..

Ref란? HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 있다. 바로 ref(reference의 줄임말) 개념이다. ref는 render 메서드에서 생성된 DOM 노드나 리액트 엘리먼트에 접근할 수 있도록 레퍼런스 값을 만들어준다. Ref를 통해서 DOM 노드나 리액트 엘리먼트에 접근하여 값을 얻어낼 수 있다. id 대신 ref? 리액트 컴포넌트 안에서도 id를 사용할 수는 있다. 하지만 컴포넌트의 특성상 여러번 사용되게 되면 HTML에서 id가 중복되어 나타나기 때문에 잘못된 사용이 된다. 반면 ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동하기 때문에 이런 문제가 생기지 않는다. 어떤 상황에서 ref를 사용해야 할까? ref는..

4.1 리액트의 이벤트 시스템 HTML에서 이벤트를 작성하던 것과 비슷합니다. 아래는 HTML에서의 이벤트 입니다. 예시 버튼 리액트에서의 이벤트는 어떨까요? 이벤트를 사용할 때 주의 사항 1. 이벤트 이름은 카멜 표기법으로 작성 - React: onClick - HTML: onclick 2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달 - React: 함수 형태의 객체 - HTML: 큰따옴표 안에 실행할 자바스크립트 코드 3. DOM 요소에만 이벤트를 설정 div, button,,, 등의 DOM 요소에는 이벤트를 설정 할 수 있지만, 직접 생성한 컴포넌트는 불가능 합니다. 위와 같이 직접 만든 MyComponent에 onClick 이벤트를 설정한다고 해서 해당 컴포..

컴포넌트의 기능은 단순한 템플릿 이상이다 - 데이터가 주어졌을 때 UI 생성 - 라이프사이클 API를 이용하여 컴포넌트가 화면에서 나타나거나 사라지는 등 변화가 나타날 때 주어진 작업을 처리 - 임의 메서드를 만들어 특별한 기능을 추가 클래스형 컴포넌트 import { Component } from 'react'; class App extends Component { // render 함수가 꼭 필요하다. render() { const name = 'react'; return {name} } } export default App; 클래스형 컴포넌트와 함수 컴포넌트 차이 클래스형 컴포넌트 - 객체지향 프로그래밍 구조를 가지며, state를 초기화 하기 위해 constructor을 가진다. - 코드가 길고 ..

리액트를 사용하는 이유 최근 몇 년간 개발자들은 자바스크립트에 열광하고 있습니다. 자바스크립트는 웹 브라우저에서 간단한 연산을 하거나 시각적인 효과를 주는 단순한 스크립트 언어에 불과하지만 현재는 웹 어플리케이션에서 가장 핵심적인 역할을 합니다. 자바스크립트만으로 규모가 큰 어플리케이션을 만들 수 있는 시대가 왔지만 대규모 어플리케이션을 특별한 도구 없이 순수하게 JS로만 관리하기엔 힘듭니다. 따라서 지금까지 수많은 프레임워크(Angular, Backbone.js, Vue.js 등)가 조금씩 다른 관점에서 이를 해결하기 위해 노력해왔습니다. 자바스크립트 기반 프레임워크 이 프레임워크들은 주로 MVC, MVVM, MVW 아키텍처를 사용합니다. MVC(Model-View-Controller) 아키텍처 Mod..