사과하는 제라스

map() 함수란? : 반복되는 컴포넌트를 렌더링할 수 있는 것. arr.map(callback, [thisArg]) - callback: 새로운 배열의 요소를 생성하는 함수로 파라미터는 currentValue, index, array가 있음. - thisArg: 선택적으로 쓸 수 있는 항목으로, callback 함수 내부에서 사용할 this 레퍼런스임. 상태 안에서 배열을 변형할 때는 배열에 직접 접근하여 수정하는 것이 아니라 concat, filter 등 내장 함수를 사용하여 새로운 배열을 만든 후 이를 새로운 상태로 설정해 주어야 함.

ref는 언제 쓸까...!? -> DOM을 꼭 직접적으로 건드려야 할 때 DOM을 꼭 사용해야 하는 상황 1. 특정 input에 포커스에 주기 2. 스크롤 박스 조작하기 3. Canvas 요소에 그림 그리기 등등... import React, { Component } from "react"; import "./ValidationSample.css"; class ValidationSample extends Component { state = { password: "", clicked: false, validated: false, }; input = React.createRef(); handleChange = (e) => { this.setState({ password: e.target.value, }); ..

이벤트: 사용자가 웹 브라우저에서 DOM 요소들과 상호작용하는 것. 이벤트 사용 시 주의사항 1. 이벤트명은 카멜 표기법으로 작성 2. 실행할 자바스크립트 코드가 아닌 함수 형태의 값을 전달하는 것임. 3. DOM 요소에만 이벤트를 설정할 수 있음. 이벤트 종류 Clipboard / Touch / Composition / UI / Keyboard / Wheel / Focus / Media / Form / Image / Mouse / Animation / Selection / Transition 이벤트 객체는 SyntheticEvent로 웹 브라우저의 네이티브 이벤트를 감싸는 객체이다. -> 네이티브 이벤트와 달리 이벤트가 끝난 후 초기화되므로 정보를 참조 불가능... ∴ 비동기적으로 이벤트 객체를 참조할..

props 기본값 설정: defaultProps //MyComponent.js const MyComponent = props =>{ {...} } //이렇게 적어주면 props로 name을 못 받아올 시 정해진 값으로 default 값을 넣어줌. MyComponent.defaultProps = { name: '기본 이름' } 태그 사이의 내용을 보여 주는 Children //MyComponent.js const MyComponent = props =>{ return ( {props.children} //이렇게 해주면 자식 컴포넌트에서 Mycomponent 태그 사이에 넣어준 JSX가 넘어오게 됨. {...} ) } 비구조화 할당 //MyComponent.js const MyComponent = props..

JSX: Javascript의 확장 문법으로 XML과 매우 비슷하게 생김. 장점 1. 보기 쉽고 익숙함: HTML 코드 작성하는 거랑 비슷해서 좋음. 2. 더욱 높은 활용도: HTML 태그들을 컴포넌트 작성할 때 그대로 사용할 수 있기에 편함. - React 컴포넌트에서는 요소 여러개를 왜 하나의 요소로 꼭 감싸줄까? : 'Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다' 는 규칙 때문. 배운 JSX 문법 1. JSX 내부의 자바스크립트 표현식에서 if문을 사용할 수 없음. 2. &&, ||로 조건부 렌더링 //아래는 null을 쓰는 식으로 조금 의미없는 코드를 쓰지만... {name==='리액트' ? 리액트입..

1.1 왜 리액트인가? - Javascript만으로 큰 규모의 Application 만드는 시대임. -> Angular, Backbone.js, Derby.js, Ember.js, Ext.js, Knockback.js, Sammy.js, PureMVC, Vue.js 등 여러 프레임워크들은 MVC(Model-View-Controller) 아키텍쳐, MVVM(Model-View-View-Model) 아키텍쳐를 사용함. 하지만!!!! React는 오직 V(View)만 신경 쓰는 라이브러리임. 컴포넌트: 특정 부분이 어떻게 생길지 정하는 선언체. 렌더링: 사용자 화면에 뷰를 보여주는 것 초기 렌더링 VS 리렌더링 초기 렌더링을 하면 내부 컴포넌트들이 재귀적으로 렌더링하고 / 그 결과 가지게 된 정보들로 HTML..

이번 학기 SOPT 동아리를 했던 친구용 덕분에 SOPT에 관심을 더 갖게 되었고 Demo Day를 통해 여러 서비스들을 공개한다는 소식을 듣고는 바로 신청을 했다. 총 14팀이 여러 특색있는 서비스들을 웹 혹은 웹 앱 혹은 앱을 통해 제공하였다. 14팀에 대한 생각과 그 중 몇가지 의미있었던, 아이디어를 배우고 싶은 팀들은 그런 요소들까지 적어본다. 앱 서비스 1. '해라': 할까? 말까? 하는 당신을 위한 고민 해결사 1) 설명: 이 서비스를 보자마자 든 생각은 에타에서의 고민글들이다. 뭔가 성지글이 되기도 하고 다양한 고민들로 인해 많은 사람들이 결과도 기대하는 그런 기능이다. 마치 tvN '마녀사냥'의 '로멘트'와 같이 사연에 대해 댓글을 달거나 해결법을 제시하는? 그런 역할도 할 듯하다. 2) ..

Prettier를 통해서 보통 코드 스타일을 정리한다. 이때는 프로젝트의 최상위 디렉토리에 .prittierrc 파일을 추가해주고 그곳에 설정들을 입력해주면 된다. { "singleQuote": true, "semi": true, "useTabs": false, "tabWidth": 2, "trailingComma": "all", "printWidth": 80 } 보통 이런 식으로 간단하게 하나의 객체형태로 적어주면 된다. Prittier의 옵션들을 한번 ARABOZA!! Prittier 전체 옵션 { "arrowParens": "avoid", // 화살표 함수 괄호 사용 방식 "bracketSpacing": false, // 객체 리터럴에서 괄호에 공백 삽입 여부 "endOfLine": "auto", ..

성능을 최적화하는 수단은 여러가지가 존재한다. 1. React.memo를 사용한다. React.memo로 어떤 컴포넌트의 export 값을 감싸주면 해당 컴포넌트의 props가 바뀌지 않았다면, 리렌더링을 하지 않도록 설정함. -> 함수 컴포넌트의 리렌더링 성능을 최적화해 줌. 주로 리스트 관련 컴포넌트를 작성할 때는 리스트의 아이템, 리스트 이 두개의 컴포넌트를 React.memo를 통해 최적화해주어야 한다. 2. useState의 함수형 업데이트 useState의 함수들을 함수형으로 사용하면 된다. 예를 들면 다음과 같다. const [data, setData] = useState(''); function test() { setData(data => data = newData); //이런 식으로 se..

React Hook에서 useReducer를 사용하면 여러개의 input이 존재하더라도 간편하게 관리할 수가 있다!! 1) 커스텀 Hook을 사용하지 않은 Ver. //Info.js - NonCustomed Ver. import React, { useReducer } from "react"; function reducer(state, action) { return { ...state, [action.name]: action.value, }; } const Info = () => { // const [name, setName] = useState(""); // const [nickname, setNickname] = useState(""); const [state, dispatch] = useReducer..