Web Front-End (41) 썸네일형 리스트형 React 컴포넌트 스타일링 1. 일반 CSS 컴포넌트를 스타일링하는 가장 기본적인 방법 2. SASS(Syntactically Awesome Style Sheets) CSS 전처리기 중 하나로써, 확장된 CSS 문법을 사용하여 CSS 코드를 더욱 쉽게 작성할 수 있도록 해줌 SASS에서는 .scss와 .sass를 지원한다. SASS의 3버전에서 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 SASS의 모든 기능을 지원하는 CSS의 Supuerset이다. SASS와 SCSS의 간단한 차이는 {}(중괄호), ;(세미콜론)의 유무정도이고 SCSS의 경우 기존 CSS와 문법적으로는 큰 차이가 없다. 보통 .scss를 좀 더 자주 사용된다고 한다. node-sass 라이브러리를 통해 SASS를 CSS로 변환한.. React Hooks 리액트팀에서도 훅과 관련된 개발을 적극적으로 하고 있고 현재 새롭게 만들어지는 컴포넌트에 대해서 함수형으로 선언하는게 대세인데 여기에 리액트 훅이 한 몫하고 있다. 1. useState 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해준다. 예) const [value, setValue] = useState('initial data'); 리턴 배열의 첫 번째는 상태값, 두 번째는 상태를 설정하는 값 2. useEffect 렌더링될 때마다 특정 작업을 수행할 수 있도록 설정할 수 있는 Hook 기본적으로 렌더링되고 난 직후마다 실행됨 클래스형 컴포넌트의 componentDidMount, componentDidUpdate를 합친 형태 마운트만 실행하고 싶을 때는 두 번째 파라미터에 '[]' 비어 있는 .. React 라이프사이클 메서드 1. render() 함수 이 메서드 안에서는 this.props와 this.state에 접근할 수 있으며, 리액트의 요소를 반환한다. 이벤트를 처리하는 곳이 아닌 곳에서 setState를 사용하면 안되고 DOM에 접근하면 안됨 DOM 정보를 가져오거나 state에 변화를 줄때는 componentDidMount에서 처리해야함( Vue에서 mount() 훅에서만 DOM에 접근한 것과 동일한 것으로 보임) 2. constructor 메서드 constructor(props) { } 다른 객체지향 언어에서와 동일하게 컴포넌트를 만들 때 처음으로 실행되고 초기 state를 설정할 수 있다. 3. getDerivedStateFromProps 메서드 리액트 버전 16.3 이후에 생겨난 라이프사이클 메서드(버전확인은 .. React 라이프사이클 1. 마운트 DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트라고 한다. constructor -> getDerivedStateFromProps -> render => componentDidMount 순으로 수행 constructor: 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 getDerivedStateFromProps: props에 있는 값을 state에 넣을 때 사용하는 메서드 render: UI를 렌더링하는 메서드 componentDidMount: 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드(Vue로 치면 mount() ) 아마 여기에서 DOM 접근이 가능할듯 2. 업데이트 prpos가 바뀔 때 state가 바뀔 때 부모 컴포넌트가 리렌더링될 때 this.forceU.. React Event 1. React event에서 주의할 사항 이벤트의 이름은 카멜 표기법으로 사용할 것 이벤트에 자바스크립트 코드를 전달하는게 아니라, 함수 형태의 값을 전달 할 것 DOM 요소에만 이벤트 설정이 가능하고 컴포넌트에는 이벤트를 자체적으로 설정할 수 없음(컴포넌트에는 props를 전달할 뿐) 예제) DOM Event Handling 부분에 객체 형태로 전달. 객체가 아닌 자바스크립트 코드를 넣으면 실행안됨 Warning 문구로 "Warning: Expected `onChange` listener to be a function, instead got a value of `string` type." React의 이벤트에서는 문자열이 아닌 Function 형태를 기대함 import React, { Componen.. React 함수형 컴포넌트, 클래스형 컴포넌트, React에서 컴포넌트를 선언하는 방법은 함수형 컴포넌트로 선언하는 방법과 클래스형 컴포넌트로 선언하는 방법 2가지가 존재한다. 리액트 공식 매뉴얼에서는 컴포넌트를 새로 작성할 때 함수형 컴포넌트와 Hooks를 사용하도록 권장 하고 있다. 그렇다고 클래스형 컴포넌트가 사라지는 건아니라고 한다.. 그럼 뭘써야하는겨?? 간단한 컴포넌트는 함수형으로 선언하고 좀 복잡한건 클래스형으로 해야할까? 그건아닌듯.. 그렇게 따지면 함수형으로도 충분히 구현가능.. ==> 여기서 정의 내린다.... 컴포넌트는 함수형으로 하는게 좋다. 이유는 훅이 주는 장점이 매우 크고 무엇보다, 리액트팀에서 훅과 관련된 기능 개발을 적극적으로 하고 있기 때문이다. 1. 함수형 컴포넌트 // 함수형 컴포넌트 예제 import React f.. React Project 생성 1. Yarn을 이용하는 방법 프로젝트 생성 명령어: yarn create react-app 2. npm을 이용하는 방법 프로젝트 생성 명령어: npm init react-app 위 두개의 옵션 명령어를 통해서 프로젝트를 위한 웹팩, 바벨 및 설정 과정을 생략하고 react 프로젝트를 쉽게 생성할 수 있다. 3. 실행방법 생성된 디렉토리로 이동 후 yarn start 또는 npm start 명령어를 통해서 react 앱을 실행시킨다. 생성된 프로젝트에서 src/App.js를 보면 function 키워드를 사용하여 컴포넌트를 만드는 것을 볼 수 있는데 이를 그 유명한 "함수형 컴포넌트"라고 불린다. 함수에서 내용을 반환하고 있는 내용을 나타낸다. HTML 같지만 이는 문자열 템플릿도 아닌 JSX라고 불리운.. Javascript 유용한 Tip 1. Truthy 값과 Falsy 값 -> Javascript는 엄격한 자료형을 따지지 않는 느슨한 언어이기 때문에 어떤 값들은 true, false 같은 Boolean 자료형이 아니더라도 마치 true, false인 것처럼 인식되는 값이다. 이는 프로젝트를 통해서 어떤 변수의 존재 유무를 별도의 메서드를 사용하지 않고도 손쉽게 쓸 수 있어서 유용하게 사용할 수 있었다. 1.1 Truthy 값 true 0 보다 큰 숫자 '0' 과 같은 비어있지 않은 문자열 []와 같은 빈 배열 {}와 같은 빈 오브젝트 function() {} 와 같은 빈 함수 1.2 Falsy 값 false 숫자 0 '' 와 같은 빈 문자열 null undefined NaN 2. 배열 메서드 2.1 forEach 설명: 배열의 원소들을.. 이전 1 2 3 4 5 6 다음
