ReactStudy
1.React 설치하기 + 각종 라이브러리
React 설치
2.화살표 함수에 관하여
자바스크립트의 화살표 함수에 대하여
3.constructor(생성자)에 대하여
constructor에 대하여
4.리액트의 기본적인 코드 이해하기
리액트의 기본적인 코드
5.1-1. component(컴포넌트) 만들기
컴포넌트를 생성하는 기본적인 방법
6.1-2. props(properties)
컴포넌트 속성을 사용할 때 사용하는 요소먼저 1-1에서 사용했던 MyComponent.js파일을 수정해 보겠습니다.이렇게 출력됩니다.이제 App.js로가서 props를 설정하여 봅시다.이처럼 props를 통해 MyComponent의 name값에 ‘송한솔’을 줄 수 있습
7.1-3. props.children
children은 컴포넌트 사이의 내용을 보여 주는 props입니다.
8.1-4. 비구조화 할당(구조분해 문법)을 이용한 props 내부 값 추출하기
객체에서 값을 추출하는 문법을 비구조화 할당이라고 부릅니다.다른 말로 구조분해 문법이라고도 합니다. 이렇게 각 속성을 props로 정의함으로써 props.name을 name으로 줄일 수 있고 코드 작성시 직관성을 높여줄 수 있습니다.
9.1-5. propTypes를 통한 props 검증
컴포넌트에서 필수의 props를 지정하거나 props의 타입을 지정하고 싶을 때 사용합니다.
10.1-6. isRequired를 사용한 필수 propTypes 설정
isRequired를 사용하여 필수 propTypes를 설정하여봅시다.
11.1-7. 클래스형 컴포넌트에서 props / propTypes사용하기
클래스형 컴포넌트에서 props를 사용할 때는 render함수에서 this.props를 조회하면 됩니다.
12.2-1. state
리액트에서 state는 컴포넌트 내에서 관리되는 데이터를 나타냅니다.state는 컴포넌트의 동적인 특성을 구현하는 데 사용되며, 변경될 수 있는 데이터를 저장합니다.
13.2-2. 간단한 state 실습
클래스형 컴포넌트에서 constructor를 작성할 때에는반드시 super(props)를 호출 해 주어야 합니다.
14.2-3. state를 constructor에서 꺼내기
이 코드에서 constructor와 그에 따라오는 super(props)를 지워봅니다. 새로 고침 후 확인해보면 여전히 state가 사용이 가능한 것을 볼 수 있습니다.
15.2-4. this.setState에 객체 대신 함수 인자 전달하기
만약 onClick에 설정한 함수 내에서 this.setState를 두번 호출하면 어떻게 될까?
16.2-5. useState(Hooks)
16.8v 이후로 원래 함수형 컴포넌트에서 사용할 수 없었던 state를 함수형 컴포넌트에서도 사용할 수 있게됬습니다.
17.3-1. Event 핸들링
red { color: #e33e33; font-weight: bold; } orange { color: #e88e22; font-weight: bold; } TE { color: #e33e33; font-weight
18.3-2. Event 핸들링 실습하기.
작성한 EventPractice 컴포넌트를 App.js에 연결합니다.EventPractice 컴포넌트에 input 요소를 렌더링하는 코드와 해당 요소에 onChange이벤트를 설정하는 코드를 작성합니다.다음 코드를 EventPractice 컴포넌트의 render 메서
19.3-3. 임의 메서드 만들기
저희는 이전에 이벤트를 실행할 자바스크립트 코드를 전달하는 것이 아닌, 함수 형태의 값을 전달합니다. 라고 배웠습니다.그렇기에 지금까지의 함수를 직접 만들어서 실행하였지만 함수를 미리 준비하여 전달하는 방법도 있습니다.
20.3-4. input 여러개 다루기
저희는 input값을 state에 넣는 방법을 배웠습니다.그렇다면 input이 여러개 일때는 어떻게 해야할까요?
21.4-1. ref(reference) ⇒ DOM에 이름 달기
리액트에서도 JSX내부에서 id는 사용이 가능하지만리액트 프로젝트에서 DOM에 이름을 다는 방법이 따로 있습니다. 그것은 바로 ref(reference)개념입니다.
22.4-2. ref 실습하기
프로젝트를 만들어서 ValidationSample.js / ValidationSample.css 파일을 작성해 봅시다.
23.4-3. 컴포넌트에 ref 설정하기
이렇게 하면 ValidationSample 내부의 메서드 및 멤버 변수에도 접근할 수 있습니다.즉, 부모 컴포넌트에서 자식 컴포넌트 내부의 ref에도 접근할 수 있다는 의미입니다.
24.5-1. map() 배열 변환
자바스크립트의 배열 메서드 중 하나인 map 함수는 배열의 각 요소를 순회하면서 주어진 콜백 함수를 실행하고, 그 결과를 새로운 배열에 담아 반환합니다. 이를 통해 기존 배열의 값을 변환하거나 가공할 수 있습니다.
25.5-2. map() 사용해보기
iterationSample.js에 배열을 추가하여 map을 사용해봅시다.
26.5-3. map함수에서 key란?
red { color: #e33e33; font-weight: bold; } orange { color: #e88e22; font-weight: bold; } TE { color: #e33e33; font-weight
27.5-4. map응용 (state사용)
Hooks중 하나인 useState를 사용하여 상태를 설정하겠습니다.
28.6-1. 라이프사이클 메서드(클래스형 컴포넌트)
리액트의 라이프사이클 메서드는 컴포넌트가 생성되고, 업데이트되며, 제거되는 과정 동안특정한 시점에 실행되는 메서드입니다.클래스형 컴포넌트에서만 사용할 수 있습니다.라이프 사이클 메서드는 총 아홉 가지입니다.Will접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 작동하
29.6-2. 라이프사이클 메서드 살펴보기
render() 메서드 컴포넌트의 모양새를 정의하는 메서드입니다. 라이프사이클 메서드중 유일한 필수 메서드이기도 합니다. 이 메서드 안에서 this.props와 this.state에 접근할 수 있으며, 리액트 요소를 반환합니다. 이 요소는 div같은 태그가될 수 있고, 따로 선언한 컴포넌트가 될 수 있습니다. 아무것도 보여 주고 싶지 않다면 nul...
30.6-3. 라이프사이클 메서드 실습예제
렌더링이 잘된걸 확인하셨다면, 이제 오류를 발생시켜 보겠습니다.
31.7-1. Hooks
Hooks란 기존의 함수 컴포넌트에서 사용할 수 없었던 다양한 작업을 할 수 있게 해줍니다.
32.7-2. Hooks - useState
가장 기본적인 Hook이며, 함수형 컴포넌트에서도 state를 지닐 수 있게 해줍니다.
33.7-3. Hooks - useEffect
useEffcet는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hooks입니다.
34.7-4. Hooks - useReducer
useReducer는 useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해 주고 싶을 때 사용하는 Hook입니다.리듀서는 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션(action)값을 전달받아 새로운 상태를 반환하는
35.7-5. Hooks - useMemo
useMemo란 렌더링하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하고, 원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용하는 방식입니다.
36.7-6. Hooks - useCallback
주로 렌더링 성능을 최적화해야 하는 상황에서 사용합니다.이 Hook을 사용하면 만들어 놨던 함수를 재사용할 수 있습니다.
37.7-7. Hooks - useRef
useRef Hook은 함수 컴포넌트에서 ref를 쉽게 사용할 수 있도록 해 줍니다.Average.js에서 등록 버튼을 눌렀을 때,포커스가 인풋 쪽으로 넘어가도록 코드를 작성해 보겟습니다.Average.js등록 버튼을 누른 후에도 input에 focus가 유지되는 것을
38.8-1. 컴포넌트 스타일링
리액트에서 컴포넌트를 스타일링할 때는 다양한 방식을 사용할 수 있습니다. 정해진 방식이라고 할만한 것이 없고, 회사마다 요구하는 스펙이 다르고, 개발자마다 취향에 따라 선택하기 때문입니다.
39.8-1. 일반 CSS
생성한 08_component-styling 프로젝트의 src 디렉터리에 App.js파일과 App.css파일이 있습니다.
40.8-2. 컴포넌트 스타일링 - Sass(1)
Syntacticall Awesome Style Sheets(문법적으로 멋진 스타일 시트)
41.8-2. 컴포넌트 스타일링 - Sass(2)
Sass(1)에서 작업한 SassComponent.scss의 변수 및 믹스인을 다른 파일로 따로 분리하여 필요한 곳에서 불러와 사용할 수 있습니다. src폴더에 styles라는 폴더를 생성하고, 그안에 utils.scss파일을 생성해 보세요.
42.8-2. 컴포넌트 스타일링 - Sass(3)
Sass-loader
43.8-3. 컴포넌트 스타일링 - CSS Module(1)
CSS Module은 CSS를 불러와서 사용할 때 클래스 이름을 고유한 값이런 형태로 자동으로 만들어서 컴포넌트의 스타일 클래스 이름의 중첩을 방지해 주는 기술입니다.구버전의 crate-react-app에서는 css-loader 설정을 별도로 해 주어야 했지만v2 버전
44.8-3. 컴포넌트 스타일링 - CSS Module(2)
클래스이름 두개 이상 적용하기 CSS Module을 사용하여 클래스 이름을 두 개 이상 적용할 때는 다음과 같이 코드를 작성합니다. 템플릿 리터럴(Template Literal) 위 코드에서 보면 ES6문법인 템플릿 리터럴(Template Literal)을 사용하
45.8-4. 컴포넌트 스타일링 - styled-components(1)
컴포넌트 스타일링의 또 다른 패러다임은 자바스크립트 파일 안에 스타일을 선언하는 방식입니다. 이 방식을 'CSS-in-JS' 라고 부릅니다. 여기서는 CSS-in-JS 라이브러리 중에서 개발자들이 가장 선호하는 styled-components를 알아보겠습니다.
46.8-4. 컴포넌트 스타일링 - styled-components(2)
앞에서 작성한 코드를 확인해 보면CSS코드를 작성할 때 `을 사용해 만든 문자열에 스타일 정보를 넣어 주었습니다. 여기서 사용한 문법을 Tagged 템플릿 리터럴이라고 부릅니다.
47.9-1. 일정관리 웹 애플리케이션 만들기
지금까지 배운 지식을 사용하여 일정관리 애플리케이션을 만들어 보겠습니다.
48.9-2. TodoTemplate 만들기
이전에 생성한 TodoTemplate.js 컴포넌트를 만들어 보겠습니다.결과
49.9-3. TodoInsert 만들기
이제 할일 목록을 추가해주는 컴포넌트 TodoInsert를 생성하겠습니다. 여기에서는 9-1에서 설치한 react-icons를 사용해보겠습니다.
50.9-4. TodoList / TodoListItem 컴포넌트 만들기
이제 추가한 일정관리 항목이 보이는 TodoList와 그 안의 TodoListItem 컴포넌트를 만들 차례입니다. 먼저 TodoList.js를 만듭니다. 여기에서는 별도의 props 전달 없이 TodoListItem을 여러번 불러올 뿐입니다. 레이아웃을 잡기 위함이
51.9-5. 기능 구현 - State 사용하기
App.js에서 useState를 사용하여 todos라는 상태를 정의하고, todos를 TodoList의 props로 전달해봅시다.
52.9-6. 항목 추가 기능 구현하기
이번에는 TodoInsert 컴포넌트를 통해 일정 항목을 추가하는 기능을 구현해보겠습니다.먼저 기존에 만들었던 TodoInsert 컴포넌트를 수정해봅시다.useCallback을 통해 전에 사용했던 함수를 재사용하여 리소스의 낭비를 줄여줍니다.이제 App.js의 todo
53.9-7. 항목 삭제 기능 구현하기.
이번에는 지우기 기능을 구현해보겠습니다.리액트 컴포넌트에서 배열의 불변성을 지키면서 배열 원소를 제거해야 할 경우배열의 내장함수인 filter를 사용하면 매우 간편합니다.App.js에 onRemove 함수를 추가해봅시다.그리고 onInsert와 똑같이 TodoList에
54.9-8 항목 토글 기능 구현하기
체크박스를 통해 항목을 체크하는 기능을 구현해 보겠습니다.이것 또한 onRewrite함수를 App.js에 만들고 TodoList를 통해 TodoListItem에 전달해주세요이 함수는 항목의 id를 파라미터로 받아, 해당 항목의 checked 속성을 반대로 변경합니다.t