React (14) 리스트형 TIL 16 MockData 활용하기 위 사진에 나와있는 mockData를 보면 배열안에 하나의 객체안에 키값들로 데이터를 구분해놓은걸 볼 수 있다. 컴포넌트마다 map함수를 통해서 mockData를 뿌려주기 위해서는 해당 키값에 접근을 해줘야하는데 contents를 키에 할당된 배열값들을 뿌려주기 위해서 고민을 많이 했다. 가장 윗줄에 답이 나와있는데 객체내에 큰 데이터 하나가 들어가있기때문에 infos배열의 0번 인덱스에 먼저 접근을 해줘야 객체의 원하는 키에 접근을 할 수 있다. 처음에는 단순하게 infos.contents이런식으로 하다가 json파일을 쪼개서 줄려고 하다가 json파일을 조작하고 이상한 방법을 다 써봤지만 안됐다. 답은 너무나도 간단했지만 과정은 험난했다..... TIL 15 React LifeCycle 1. 리액트 사이클 리액트에서 화면이 처음 생성될때와 업로드될때 실행되는 함수순서이다. 2. 브라우저 생성 예시 각각의 함수내에는 console로 실행된다는 코드를 넣어줬고 componentDidMount에서는 setState로 state값을 변경해주는 코드를 넣어 줬다. render함수내에도 실행되면 console이 찍히게 해줬다. 이 코드를 npm start로 실행하고나서 처음으로 콘솔창에 찍히는걸 보게되면 어떤 순서로 console이 찍히는지 확인할 수 있다 첫번째로 constructor함수가 실행되고 render함수가 실행되고 나서 componentDidMount 함수가 실행된다. componentDidMount함수는 constructor, render함수가 다 실행되고나서 호출된다. 그래서 보통.. TIL 14 React 불변성 1. 불변성이란? let string = '첫번쩨' // 1. string: '첫번째'가 메모리 영역1에 등록. string = '두번째' // 2. string: '두번째'가 메모리 영역2에 등록. 문자열은 값을 바꾸게 되면 '첫번째'라는 문자열이 할당된 주소1이랑 바꿔준 '두번째' 주소2가 달라진다. 리액트내에서 state값이 변경되면 랜더링이 일어나는데 이는 메모리영역의 값이 바뀐걸 인지를 해서 되는 과정이다. 2. 배열 객체는? 리액트 state값중 배열이나 객체 내부의 값이 변경되면 render이 일어나는데 만약 state에 있는 원본배열에다가 그대로 값을 변경하고 state값을 갱신해주면 react내에서 객체 또는 배열의 값이 어디가 변경됐는지 일일이 다 확인을 한 후 랜더링이 일어난다. 이는.. React로 인스타그램 피드창 댓글 업로드 구현 리액트로 인스타그램의 피드창에서 댓글 업로드 하는 기능을 구현해봤다. 바닐라 자바스크립트에서는 querySelector로 Dom요소를 가지고와서 addeventListener로 동적인 이벤트를 할당해줬다. 리액트에서는 완전히 다르다. 기본적으로 리액트에서는 어떤값이 변할때마다 화면에 영향을 줄 수 있는 값들은 state라는 컨테이너에서 관리해주는게 중요하다!! 변경된 state값이나 동적인 이벤트를 실행하는 함수를 props로 넘겨줘서 작동시킨다. import React, { Component } from 'react'; import './Main.scss'; import MainRight from './MainRight'; import Feed from './Feed'; class Main extend.. TIL 14 React로 인스타그램 로그인 구현(setState, 삼항연산자) 이전에 바닐라 자바스크립트로 구현했던 인스타그램 로그인창을 구현했던걸 이번에는 리액트로 똑같이 구현하는걸 시도했다. 하면서 많은 시행착오들을 겪었는데 이를 통해서 리액트에 좀 더 가까워지게 된 좋은 경험이됐다. 1. 최상단 요소에 height 100% 주는법 리액트를 쓰지않고 그냥 웹페이지 최상단에 height 100%를 주고 시작할때 html, body에 height:100%을 주면 해결이 되지만 이는 리액트에서는 하나를 더 추가해야된다! 리액트는 단하나의 index.html 파일 하나로 이루어져있고 우리가 만드는 모든 내용들은 저 안에 속해 있다. 그래서 css파일에다가 body, html, #root{ height: 100% }을 줘야 최상단 요소에 비로소 적용이 된다! 2. setState로 st.. TIL 13 JSX, React 기초부터 1. JSX란? 자바스크립트 문법을 확장한 리액트에서 쓰이는 고유의 문법이다. 단순히 봤을때는 html마크업과 비슷해보이지만 자바스크립트에서 쓰이는 모든 기능이 포함되어있다. 2. 단 하나의 html 파일 CRA을 통해서 react 초기 세팅을 마치면 html파일은 하나만 있는것을 볼 수 있다. 하나의 프로젝트 처음부터 끝까지 react에서는 하나만의 html 파일하나를 쓰고 나머지는 js파일에서 JSX로 구현한 내용들로 이루어진다. index.html 파일을 보면 단하나의 div태그와 root라는 아이디가 지정되어있다. index.js파일에는 React와 ReactDom모듈을 import 한 코드를 볼 수 있다. 가장밑에 ReactDOM.render(, document.getElementById('ro.. 이전 1 2 다음
