Tagged: 리액트

[스터디]리액트를 다루는 기술-일정관리 웹 어플리케이션

아래 명령어를 이용해 새로운 프로젝트를 만든다. 소스포멧팅을 쉽게 하기 위해 프리티어의 설정파일을 프로젝트 최상단에 추가한다. intellij에서 prettier를 사용하려면 플러그인에서 Prettier를 설치하면 된다. 자세한 사항은 여기를 참조한다. 프로젝트 최상위 디렉토리에 jsconfig.json 파일을 만들어 넣으면, import...

[스터디]리액트를 다루는 기술-컴포넌트 스타일링

스타일링 방식 일반 CSS : 컴포넌트를 스타일링 하는 기본적인 방식 Sass : CSS 전처리기 중 하나로 확장된 CSS문법을 사용 CSS Module : CSS 클래스의 고유한 이름을 자동으로 생성해주는 옵션 styled-components : 스타일을 자바스크립트에 내장시키는...

[스터디]리액트를 다루는 기술-Hooks

useState 사용하기 useState 여러번 사용하기 useEffect 사용하기 useEffect, 마운트될 때만 실행하고자 할 때 useEffect 특정값이 갱신될 때만 수행하고 싶을 때 useEffect, 뒷정리하기 useReducer useReducer, 인풋상태 관리하기 useMemo : 컴포넌트 내부에서 발생하는 연산을 최적화 하는...

[스터디]리액트를 다루는 기술 – 컴포넌트의 라이프사이클 메서드

라이플사이클 메서드 render() : 컴포넌트의 모양을 정의 constructor(props) : 컴포넌트의 생성자 getDerivedStateFromProps(nextProps, prevState) : 컴포넌트가 마운트될 때와, 업데이트될 때 호출. props롤 받아온 값을 state에 동기화 시키는 용도 componentDidMount() : 첫 렌더링 이후 실행 shouldComponentUpdate(nextProps,...

[스터디]리액트를 다루는 기술 – 이벤트 핸들링

리액트에서 이벤트를 사용할 때 주의점 이벤트 이름은 카멜 표기법으로 작성한다. 이벤트를 전달할 땐 함수 형태로 전달한다. DOM 요소에만 이벤트를 설정할 수 있다.(사용자가 만든 컴포넌트에는 이벤트를 설정할 수 없다) 이벤트의 종류 Clipboard Touch Composition UI...

[스터디]리액트를 다루는 기술 – 컴포넌트

클래스형 컴포넌트 클래스형 컴포넌트 state 기능 및 라이프사이클 기능을 사용할 수 있다. render 함수가 있어야 한다. JSX를 반환해야 한다. 함수형 컴포넌트 선언하기 편리하다. 메모리를 적게 사용한다. 빌드한 후 배포할 때 결과물의 파일 크기가 더...

[스터디]리액트를 다루는 기술 – JSX

JSX란? JSX문법 3. If문 대신 조건부 연산자를 쓴다. 4. undefined를 return(렌더링)하면 안된다. 5. 인라인 스타일 사용 시 카멜 표기법을 써야한다. 6. class 대신 ClassName을 쓴다. 7. html태그는 꼭 닫아야 한다. 8. 주석 사용법

[스터디]리액트를 다루는 기술 – 리액트 시작

1. 개요 요즘은 자바스크립트만으로 대규모의 애플리케이션 개발이 가능해졌다. Angular, Backbone.js, Vue.js 등이 있다. 이런 프레임워크들은 mvc 아키텍처를 주로 사용한다. 페이스북에서 개발한 리액트는 MVC구조에서 V( view)만 신경 쓰는 라이브러리이다. 2. 리액트의 특징 컴포넌트를 사용한다.(재사용이 가능한...