Study/React (23) 썸네일형 리스트형 리액트 기초반 3 https://blog.naver.com/dlalsgh0812/222550196124 리액트 기초반 3 1. Event Listener 1) 이벤트 리스너란? 이벤트는 사용자가 어떤 행동을 했을 때 일어나는 것들을 말합니... blog.naver.com 카카오 로그인 문제로 잠시 네이버 블로그에서 썼던 내용입니다. 전편의 react의 3주차 내용입니다. 리액트 기초반 2 라이프 사이클 라이프 사이클이란 컴포넌트(데이터를 입력받아 DOM Node를 출력하는 함수)가 렌더링을 준비하는 순간부터 페이지에서 사라질 때까지를 말합니다. 이것에 대해 좀 더 자세히 알기 위해서는 가상돔에 대해 먼저 알아야 합니다. 💡돔(DOM)이란? DOM은 html 단위 하나하나를 객체로 생각하는 모델입니다. div 라는 객체는 텍스트 노드, 자식 노드 등등, 하위의 어떤 값을 가지고 있습니다. 이런 구조를 트리 구조라고 합니다. 즉, DOM이 트리구조를 갖고 있는 겁니다. DOM 트리 중 하나가 수정될 때마다 모든 DOM을 뒤지고, 수정할 걸 찾고, 수정한다면 많은 연산이 일어나게 됩니다. 그래서 메모리에 보이지 않는 가상돔이라는 개념이 등장하게 됩니다. 원래는 돔에 컴포넌트를 받아 화면에 띄우.. 리액트 기초반 1주차 서버와 클라이언트 클라이언트는 우리가 웹사이트를 보는 도구(휴대폰, PC, 아이패드)가 모두 클라이언트이다. 서버는 우리가 보는 웹사이트에 뿌려줄 것(html, 데이터)을 만들어서 클라이언트에 전달합니다. 서버리스(serverless): 서버를 구성할 때 EC2를 사고, 서버 설정을 해준다. 이 설정을 미리 해둔 어떤 서버를 빌려다 쓰는 겁니다. 즉, 서버의 사양, 네트워크 설정 같은 게 미리 되어 있는 서버를 빌려 쓰니, 인프라 작업을 내가 안해도 되는 겁니다. 이걸 서버리스라고 합니다. 💡 EC2 란 무엇일까요? 이용자는 높은 초기비용, 유지및보수등의 다양한 제약에서 벗어나서 단시간안에 여러 가지 프로세서, 스토리지, 네트워킹, 운영 체제, 구매 모델을 선택하여 생성 할 수 있으며 사양변경, 삭제도 .. 코지코더 React 14. 자식 컴포넌트에서 부모 컴포넌트 스테이트 변경하기 기존코드에 있던 form을 컴포넌트로 빼내는 작업을 해보겠다. 전체적인 틀과 추가 기능을 컴포넌트로 따로 만들어 배치해 본문의 코드를 줄여볼 생각이다. App.js에 있던 리스트에 영화를 추가하는 기능을 MovieFrom.js에 넣어 따로 컴포넌트로 만들었고 페이지의 기본적인 틀도 같이 담아넣었다. 이를 위해 사용한 것이 props이다. props는 앞서 사용했었던 것으로 부모 컴포넌트에서 자식 컴포넌트로 정보를 넘길 때 쓴다. 우리는 영화를 리스트에 추가하는 기능을 MovieForm.js라는 자식 컴포넌트로 옮겨준다. 그래서 App.js의 30을 보면 addMovie={addMovie}로 자식 컴포넌트에게 20번의 addMovie함수를 넘기는 것을 확인할 수 있다. 이때 넘어간 addMoive는 Mov.. 코지코더 React 13. 영화 리스트 추가 폼 만들기 2 지금까지 만든 모습은 이러하다 리스트에 적으면 추가가 되는 것을 확인할 수 있었다. 다만 아쉬운 부분은 추가된 뒤 입력 칸에 글들이 남아있다. 그래서 이 부분을 고쳐보도록 하자. 36, 37. setMovieTitle(''); setMovieYear(''); setMovieTitle, setMovieYear에 빈칸을 입력함으로써 앞서 입력한 내용을 리스트에 추가한 뒤 빈칸으로 나타나게 하여 우리가 원하는 대로 만들 수 있다. 그리고 앞서 사용했던 스프레드 오퍼레이터(...)에 대해 좀 더 알아보자. 앞서 스프레드 오퍼레이터에 대해 잠깐 설명했었다. 다시 설명하자면 마침표 세 개를 찍고 가져올 배열의 이름을 적으면 배열의 데이터를 가져올 수 있다. 간단한 예를 들어보겠다. 일반적으로 배열에 원소를 추가하려.. 코지코더 React 12. 영화 리스트 추가 폼 만들기 1 앞서 만들었던 코드를 이용하여 영화 리스트를 만들고 따로 입력하여 추가할 수 있는 폼을 만들어보자 먼저 기존의 코드가 어떻게 작동하고 있었는지 다시 살펴보자 import로 React와 Moive 컴포넌트를 가져왔다. 이후 App 함수를 작성하였다. 먼저 const movies를 통해 배열 내 객체를 만들어서 영화제목인 title과 연도인 year을 입력하였다. 그런 다음 map을 이용하여 컴포넌트 movie에 배열 요소를 하나씩 넣어 movie를 적용시킨다음 새로운 배열을 만들어낸다. return으로 화면에 Movie List라는 타이틀과 함께 {renderMovies}가 작동한다. 이러면 제목에 Movie List가 나오고 아래 영화제목과 연도가 적히면서 나열된다. 이렇게 만들어진 코드르 우리는 여기서.. 코지코더 React 11 컴포넌트, props 데이터 보내기 복습 저번에 작성한 코드를 컴포넌트와 props를 이용해 개선해보겠다. 코드 설명 1,2번 코드는 React와 Movie를 from다음에 나오는 주소에서 가져온다. 5번 코드는 moives라는 이름으로 각 영화의 타이틀과 년도를 가진 배열의 데이터를 갖고 있다. 10번 코드는 renderMovies로 map을 이용해 배열 내 요소들에게 컴포넌트인 Movie를 적용시킨 후 movie={movie}로 인해 자식 컴포넌트인 movie에게 넘겨준다. 그리고 여기에 key값을 넣어준다. 이때 중괄호 안에 있는 movie는 각 배열의 객체를 하나의 변수로 지정한 이름이다. 이후 18번째 코드 {renderMovies}에서 그 결과가 출력된다. 코드 설명 3번에 Movie함수 안에 함수를 만들어 props를 넣어 부모 컴.. 코지코더 React 10 반복문 이번 시간에는 리액트 반복문에 대해 알아보겠습니다. // App.js import React from 'react'; function App() { const movies = [ { title: 'Maino77 1', year: 2001}, { title: 'Maino77 2', year: 2002}, { title: 'Maino77 3', year: 2003} ] return ( Movie List {movies[0].title} {movies[0].year} {movies[1].title} {movies[1].year} {movies[2].title} {movies[2].year} ); } export default App; //index.css .movie{ display: flex; align-i.. 이전 1 2 3 다음 목록 더보기
