react 15

싱글 페이지 어플리케이션 예전에는 유저가 서버에 요청을 하면 항상 요청에 맞는 HTML 파일로 응답을 했었는데, 최근에는 싱글 페이지 어플리케이션으로 하나의 HTML만 두고, 나머지 파일은 JS 파일로 만들어 두는 것. 페이지 전환 속도가 빠르고 주소가 변경되어도 서버에 추가로 웹 문서를 요청하는 작업이 필요 없다. 하지만 어플리케이션의 규모가 커지면 자바스크립트 파일 또한 커진다.(모든 파일을 자바스크립트 파일로 관리하기 때문) 라우팅 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것. 페이지 이동. https://reactrouter.com/en/main 1. React Router $ npm install react-router-dom // 버전 정해서 설치 $ npm inst..

Context 어플리케이션에서 전반적으로 사용할 값을 관리한다. (ex. 사용자의 언어, 로그인 상태, UI 테마 등 환경 설정) 주의사항 Context와 컴포넌트가 연동되면 컴포넌트를 재사용하기 어려움 자주 변경되는 상태인 경우, 사용하지 않는 것이 좋음 Context 내부의 값이 변경되면 Context를 사용하는 모든 자식 컴포넌트들이 리렌더링 됨 일반적으로 최상위 컴포넌트인 App의 state에 데이터를 넣어 관리하는데, 하위 컴포넌트가 state 값이 필요하다면 Props Drilling이 일어나게 된다. 따라서 Context를 사용해 전역으로 상태 관리를 하는 것. Props Drilling function App() { return ; } const GrandParent = ({ value }..

Hooks란? 리액트 버전 16.8에 새로 도입된 기능 함수형 컴포넌트에서 상태 관리를 할 수 있는 기능 제공 useState useRef useEffect useReducer useMemo useCallback useRef 1. useState() 가장 기본적인 Hook로 함수형 컴포넌트가 가변적인 상태를 지닐 수 있도록 해 준다. const [state, setState] = useState(초기값); state는 변수, 값이라고 생각하면 되고 setState는 state의 값을 바꿔주는 상태 변환 함수이다. uploadInput() 함수 수정 state의 기존 값을 유지하면서 새로운 값을 추가하려면 setState()의 콜백 함수에 prevState 값을 전달해서 유지해야 한다. setState((..

01. 리액트의 이벤트 시스템 이벤트를 사용할 때 주의 사항 이벤트 이름은 카멜 표기법으로 작성 onClick, onKeyUp 등 이벤트의 값으로 함수 형태를 전달 실제 자바스크립트 코드를 전달하지 않음 DOM 요소에만 이벤트를 설정할 수 있음 div, button, input, form 등에만 이벤트 설정 가능하며 직접 만든 컴포넌트에는 이벤트 설정 불가능 자주 쓰이는 이벤트 onClick, onSubmit, onMouseMove, onMouseOver, onMouseOut, onKeyDown, onKeyPress cf.) preventDefault | 어떤 태그의 기본 동작을 막음 function App() { function linkClick(e) { e.preventDefault(); consol..

01. state란? 값을 저장하거나 변경할 수 있는 객체 컴포넌트 내부에서 바뀔 수 있는 값을 의미 주로 버튼 클릭과 같은 이벤트와 함께 사용함 ※ props와 차이점 props는 부모 컴포넌트가 설정한 값을 전달받아 읽기 전용으로만 사용할 수 있고, props는 컴포넌트 내부에서는 값을 직접 변경할 수 없다. 그렇다면 어떻게 props로 전달받은 값을 변경할 수 있을까? -> useState() 활용 state의 종류 클래스형 컴포넌트의 state 속성 함수형 컴포넌트의 useState 함수 02. 함수형 컴포넌트의 useState useState에서도 배열의 비구조화 할당이 사용된다. const [value, setValue] = useState(초깃값); value | 현재 상태 setValue ..

기존에 props를 넘겨주던 방식 (인라인으로 각각 하나씩 설정) 은 데이터가 적을 때는 상관이 없지만, 데이터가 100개, 1000개 이상 넘어가면 사용하기 어려운 방식이다. 이를 해결하기 위해 배열 컴포넌트와 map을 이용 01. map() 함수 배열 안의 모든 요소들의 값을 변경해서 새로운 배열을 생성하는 함수 const arr = [1, 2, 3, 4, 5]; const modifiedArr = arr.map(function(element){ return element * 3; }); console.log(modifiedArr); // 새로운 배열에는 각 아이템들에 3을 곱한 결과가 담겨있다. 02. 영화 목록 앱 수정 데이터는 서버에서 전달받는다고 가정하고, 이 데이터들은 객체 형식으로 배열에 ..

01. 프로퍼티란? 상위 컴포넌트에서 하위 컴포넌트로 전달되는 읽기 전용. 단방향 데이터 흐름이며 프로퍼티 값은 수정이 불가능하다 . Movie.js라는 컴포넌트를 만든다고 가정해 보자, 이 컴포넌트에는 영화의 제목과 상세정보가 적혀 있다. 하지만, 이 컴포넌트를 여러 번 호출한다고 해서 각각 다른 이름의 다른 상세정보가 적혀 나오지는 않는다. 프로퍼티는 이 데이터들을 바꾸기 위해서 이용되며 App.js에서 컴포넌트에 필요한 데이터를 전달하는 것이라고 보면 된다. 따라서 Movie.js에는 영화의 제목, 상세정보를 띄우기 위한 틀만 만들어 놓고, App.js에서 데이터를 받아(props) 안의 내용물만 다른 Movie.js를 찍어낼 수 있게 되는 것이다. 프로퍼티 값 자료형 문자열 | " " 사용해서 전..

01. JSX란? JavaScript XML 자바스크립트에 XML을 추가한 확장형 문법 하나의 파일에 자바스크립트와 HTML을 동시에 작성할 수 있어서 편리함 개발자는 화면에만 집중해서 개발 가능 리액트 엔진이 JSX를 내부적으로 자바스크립트 코드로 변환시켜서 작동시킴 const element = Hello!; JSX를 사용하는 이유 코드량 감소 가독성 향상 | 중첩된 선언형 구조를 잘 나타냄 팀의 생산성 향상 | HTML과 비슷하여 전문 개발자가 아니더라도 직접 코드 수정 가능 02. React 동작 원리 작성된 코드를 리액트가 자바스크립트를 이용하여 해석 03. JSX 문법 작성 규칙 반드시 하나의 부모 태그로 감싸는 형태여야 함. 의미 없는 태그()로라도 감싸주어야 한다. 자바스크립트 표현식, 변수..

01. React란? 페이스북이 만든 사용자 UI 구축을 위한 라이브러리 특징 Component 기반 Virtual DOM(가상 돔) 사용 JSX 문법 사용 프레임워크 vs 라이브러리 공통점 | 코드의 재사용 차이점 | 제어의 흐름 권한이 어디에 있는가? 프레임워크 (내 코드의 주인은 따로 있다!) 일정한 형태와 기능을 갖추고 있는 골격 또는 뼈대를 의미 개발 시 필수적인 기능을 제공하며 개발자는 프레임워크가 정해준 방식을 따라야 함 Angular, Vue.js, Spring, Django 등 라이브러리 (내 코드의 주인은 나다!) 특정 기능을 구현하기 위해 미리 만들어진 코드 또는 함수의 집합 React, jQuery, tensorflow, pandas 등 Component 기반 사용자가 정의한 태그를..

보호되어 있는 글입니다.

새싹 프론트엔드 과정에서 개인 프로젝트로 React를 이용하여 포트폴리오를 만들어 보았습니다. 포트폴리오를 만들며 와이어 프레이밍을 어떻게 하였는지, 컴포넌트를 어떻게 구성했는지에 대한 기록을 남기는 글입니다. 1. 와이어 프레임 와이어 프레임은 기존에 제가 사용하던 그림 툴을 사용하였습니다. 전체적인 구조와 분위기를 잡았고, 내부 요소들의 배치 구성을 대체적으로 잡았습니다. 2. 컴포넌트 구성 Main | 인트로 페이지 Header | 포트폴리오임을 명시하기 위한 일종의 타이틀 Navbar | 구성물이 담긴 Section 내부를 이동하기 위한 바 Section | AboutMe, Skills, Project, Career, Education 컴포넌트를 모은 곳 AboutMe | 이름, 연락처 등 자기소..

React는 Node.js를 기반으로 구동되는 라이브러리(패키지)이다. Node.js의 Webpack, Babel 등의 여러 가지 패키지들을 이용하여 동작하는데, 이러한 기초 설정 작업을 보일러 플레이트 Create React App으로 대체할 수 있다. 보일러 플레이트를 사용하기 위해서는 npx가 필요한데, 보통 Node.js와 함께 설치되지만 설치가 되어있지 않다면 아래 명령어로 설치를 하면 된다. npx --v // 버전코드(3자리 숫자)가 나오면 정상 npm install -g npx // 버전코드가 나오지 않았을 때 이제 npx가 설치되어 있다면 아래 명령어로 React 프로젝트를 생성할 수 있다. npx create-react-app 프로젝트이름 만약 node_modules파일이 없는 리액트 ..