지난주에 이 개념에 대하여 학습을 진행하였는데, 자주 사용할 수 있을 것 같은 내용이라 블로깅을 해야겠다고 마음을 먹었다. 그러나 미루고 또 미루어 결국 약 5일 뒤에 진행하게 되었다. 날씨가 더워서 그런가 사람이 게을러지고 있다. 그래도 프로젝트 기간이 좀 있으면 다가오는데, 그전까지 열심히 내공을 쌓아 프로젝트에 발사할 수 있었으면 좋겠다. React.lazy() 리액트에서 하나의 컴포넌트를 랜더링 할 때에 보통은 import문을 코드의 맨 앞에 사용하여 미리 다운받아둔 후 사용한다. 그러나 그러면 사용 안 할수도 있는 컴포넌트들을 다운 받게되는 치명적인 단점이 있다. 이 때에 React.lazy()를 사용하여 해당 컴포넌트를 사용할 때에 해당 컴포넌트의 코드를 다운하여 사용하는 것이다. 이 경우에는 페이지 전환 시에 렌더링이 조금 느려질 수도 있지만, 처음 접속 할 때 React.lazy()로 처리한 컴포넌트의 코드를 가져오지 않으므로 렌더링 속도가 빨라진다.

리액트에는 많은 훅이 있다. 훅은 상태 라이브러리에서 상태 및 기능을 이용하도록 해주는 라이브러리이다. 지금 까지 useState, useEffect, useRef등 여러가지 훅을 사용해보았다. 이번에 새로운 2개의 훅과 내가 직접 훅을 만들어 사용하는 custom hook에 대해서 알아보자. useMemo useMemo는 특정 값을 저장해두었다가 다시 사용하고 싶을 때 사용하는 리액트 훅이다. 리액트는 컴포넌트가 리랜더링 될 때에 그 안에 있는 함수들을 다시 계산하여 호출해준다. 이 때 함수들이 시간이 오래 걸린다면 랜더링 시간 자체가 오래 걸릴 수도 있다. 이 때 useMemo를 이용해 함수의 값을 저장해주면 그 함수에 입력되는 매개변수가 바뀌지 않는 한 저장된 함수의 값을 꺼내와 사용할 수 있다. 메모이세이션이라고 하는 방식을 사용하는 라이브러리이다. > 메모이제이션(memoization)은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에

이번 과제는 코드스테이츠에서 제공하는 디자인을 이용하여 앱을 만드는 것이었다. 아무 코드가 없는 상황에서 앱을 완성하는 것은 처음이라 어려움은 예견 되있었다. 1. git project 기본적인 리포지토리를 구성한 뒤에 가장 처음에 할 일은 git project를 구성하는 것이었다. 이것또한 처음 작성해보는 것이어서 일단 기본적인 구조를 작성한 뒤에 프로젝트를 진행하면서 구현을 해야 할것 같은 부분들에 추가를 하면서 진행을 하였다. 2. 코드 작성하기 create-react-app으로 시작해 코드를 작성 하였다. react 훅으로 useState와 useEffect를 사용하였으며, 페이지 전환은 react-router-dom을 이용하여 작성하였다. 페이지마다 css를 따로 작성하였으며, 전체 구

요즘 생각보다 css를 잘 사용하는 것이 어렵다고 느끼는 찰나에 css개념을 머리속에 잘 저장해두어야 겠다는 생각을 하게 되었다. 이전에 플렉스 스타일은 수업에서 배워서 그래도 잘 사용하는데, 그리드 스타일은 사용하고 싶다가도 뭔가 헷갈려서 잘 사용하지 않는 경향이 생기는 것 같다. 이번 기회에 확실히 정리해 두어야 겠다. 그리드? grid는 한국말로 눈금을 뜻하고, 가로 세로로 구성된 격자무늬 판을 만들어 스타일링을 한다고 생각하면 편하다. 부모 요소에 할 수 있는 설정 그리드의 부모요소는 주로 div태그를 이용해 감싸준다. 설정해야할 값들은 display, grid-templete-columns, grid-templete-rows, grid-gap등 아주 여러가지가 있다. display

이번에 배운 Redux라는 라이브러리는 내용 자체는 쉽지만, 코드의 작성이 너무 복잡해서 나의 언어로 요약을 해놓는 것이 중요하다고 생각하였다. 우선 코드스테이츠에서 제시한대로 redux를 사용해 간단한 문제를 풀어보며 주요 개념을 정리하고, Redux toolkit이라는 것을 사용하면 좋다고 하여서 공식문서를 보며 정리해볼 계획을 가지고 있다. Props Drilling 이런 react코드가 있다고 가정해보자, 만약 컴포넌트D와 컴포넌트G에서 state의 값이나 함수를 사용한다고 하면, 상태의 위치를 컴포넌트A에 두고 props를 이용해 컴포넌트 B를 통해 컴포넌트 D로 전달해서 사용하여야 하고, 컴포넌트C와 컴포넌트F를 통해 컴포넌트G로 보내어서 사용하여야 한다. 컴포넌트 B,C,F는 해당 state

본래 웹은 html, css, 자바스크립트로 나누어져 구조, 스타일, 동작을 나누어 코드를 작성하였다. 그러나 이는 이점도 있지만 파일이 분산되는 단점도 있다. 이를 해결하기 위해 react Dom을 이용해 html과 자바스크립트를 한 곳에 작성 할 수 있게 되었고, 여기서 배우는 styled component의 개념을 도입해 css를 리액트에 사용할 수 있게 되었다. styled Component 시작하기 우선 styled component를 사용하고 싶은 리액트 파일의 터미널에 코드를 입력하고 실행해주면 styled component가 설치가 되고, 파일앞에 코드를 작성하면 해당 파일에서 styled-component를 이용할 수 있다. styled component 사용하기 리액트에서 styled component를 사용하는 것은 css작성하는 법과 리액트의 컴포넌트 다루는 법만 알고 있다면 어려울 것이 없다. 리엑트에 컴포넌트를 만들어 css를 넣어주고,

Lifting stateup(끌어올리기) 리엑트는 컴포넌트 단위로 구현이 되는데 하위 컴포넌트에서 상위컴포넌트의 변수를 props를 이용해 전달 받아사용할 수는 있지만, 그 변수를 변경할 수는 없다. 그러나 변경할 수 있는 방법이 한가지 존재하는데, 바로 변수를 변경하는 함수를 props로 넘겨받아 사용하는 것이다. 여기서 사용하는 것이 state의 setstate이다. 보면은 value를 바꾸는 함수를 부모 컴포넌트에서 만든 뒤에 그 함수를 자식 컴포넌트에 넘겨주어 자식 컴포넌트의 버튼을 누르면 value의 상태를 변경해주고 있다. useEffect useEffect는 어떤 컴포넌트의 렌더링이 변경될 때 실행되는 함수이다. 이를 사용하는 방법은 대표적으로 3가지가 있는데, 인자로 특정 함수만을 전달 useEffect(함수) 첫 번째 인자로 특정 함수를 전달하고, 두 번째 인자로 빈 배열을 전달 useEffet(함수, []) 첫 번째 인자로 특정 함수를

https://react.vlpt.us/

점점 블로깅이 하기가 귀찮아지고 공부 의욕도 사라진다. 수업 진도는 따라는 가고 있는데 딱 그것만 하고 있는것 같다. 그것만 하기에는 코드스테이츠에서 시키는 공부의 양이 그렇게 많지는 않으니 오늘부터라도 차근차근 블로깅 밀린 것을 좀 해봐야 겠다. Props props는 리엑트에서 사용하는 문법 중 하나로 부모 컴포넌트에서 자식 컴포넌트로 전달하는 변수라 생각하면 편하다. 함수의 전달인자를 받아 매개변수를 활용하여 사용하는 것과 비슷한 원리인데, 여기에서는 클라스와 비슷한 사용법이 이용된다. 부모 컴포넌트에서 자식 컴포넌트를 호출함과 동시에 속성으로 props를 넘겨주면, 이를 자식 컴포넌트에서 props로 받아 {props.속성이름} 으로 사용이 가능하다. state state 또한 리엑트의 문법 중 하나로, import 해서 사용해야 한다. state는 변수에 값을 저장하고, 이를 관리하는 함수를 따로 만들어 변수를 사용할 때와 변수를 변경할 때를 따로 떼어서 관

SPA spa는 Single-Page Application으로 react를 이용해 한 페이지를 나누어 따로 동작이 가능하도록 하여 새로 불러와야 하는 부분만 데이터를 받아 렌더링 하는 기법이다. 장점: 원하는 부분만 변경을 하면 되니 일부분만 렌더링 하는데에 걸리는 시간이 줄어든다. 단점: 처음 받아야할 데이터가 많기 때문에 처음 페이지를 렌더링 할 때에는 시간이 많이 걸린다. 검색엔진의 최적화에 않좋은데, 그 이유는 검색엔진은 html을 이용하는데, spa를 사용할때에 html에는 링크만 해두고 자바스크립트 내부에서 dom을 이용해 조작하므로 검색이 잘 안된다. SPA를 이용하기 위해서는 React Router이라는 라이브러리를 이용할 수 있다. React Router를 npm install을

JSX jsx는 JavaScript XML를 의미합니다. JSX는 리엑트에서 사용하는 방식으로, JSX로 만든 코드를 Babel이라는 변환기를 통해 자바스크립트로 DOM을 조작할 수 있습니다. 이를 이용하면 html과 javascript라는 두 파일로 나누어 해야하는 작업을 javascript에서 모두 처리를 할 수 있습니다. JSX 사용방법 해당 자바스크립트 파일에 react를 import 해준다 대문자로 함수를 정의해 컴포넌트를 만든다. 하나의 엘리먼트 안에 모든 엘리먼트가 다 포함되게 리턴해야 한다. 클라스 속성은 className으로 지정해야한다. 자바스크립트의 변수를 사용할 때에는 중괄호를 이용한다. 조건부 렌더링은 if문이 아닌 삼항연산자를 이용해야 한다. 여러개의 엘리먼트를 표시할 때 map을 사용하고, 항상 키값을 주어야 한다. Component 컴포넌트는 리엑트에서 많이 중요한 개념이다. 컴포넌트

다시는 야자를 안걸리겠다고 다짐을 해보았지만 또다시 걸렸다.. 이번 수업에선 state와 props에 대해 공부하였는데, props와 state를 구현하는 것 자체는 어렵진 않았지만 useState를 사용할 때에 이전에 사용한 값을 이용하려면 함수의 형태를 써야하는 것을 헷갈려 고치느라 시간이 좀 걸렸던 것 같다. 컴포넌트들을 연결해주는 것은 지난번에 해보아서 금방 하였기 때문에, 새로운 tweet이 들어올 때의 구현만을 의사코드로 적어볼 것이다. 우선 새로 입력 받을 값들을 useState를 이용하여 선언을 해준다. 유저이름, 메세지, 트윗갯수, 그리고 모든 tweet객체가 들어가 있는 배열을 만들고, 초기값은 "parkhacker", "", 전달받은 트윗갯수, 전달받은 트윗으로 지정한다. onChange를 이용해 유저이름과 메세지가 써질 때 마다 각 변수의 값을 useState의 set함수를 이용해 변경해준다. onClick을 이용해 클릭이 되면 모든 twe

오늘 처음으로 야간자율학습에 걸렸다..ㅜㅠ, 수업을 이해못하거나 그런건 아니었는데 빨리 풀고 쉬려고 종합퀴즈를 너무 빨리 푼 것 같다. 어쨋든 간에 이번 야간자율학습과제는 react twitter intro의 과제를 해결한 부분의 의사코드를 작성 하는 것이다. 어떻게 써야 할지 막막하지만 과제란에 요구사항을 하나하나 해결하겠다. sidebar컴포넌트는 app컴포넌트의 후손 컴포넌트로 지정이 되어야 하고, Font Awesome을 활용한 아이콘이 표시되어야 한다고 한다. 여기서 아이콘의 코드는 주어졌는데(className : "far fa-comment-dots") 이를 이용하면 된다. 해결방법 - app 컴포넌트의 태그 안에 후손 요소로 ` 를 집어넣어 후손 컴포넌트로 만들어주고, Sidebar컴포넌트에는 아이콘을 만드는 태그인 `를 넣어주면 된다. (물론 html의 태그에 해당