Frontend/React
-
[50문 50답] 1. 상태관리를 왜 할까요? 그리고 평소 state 관리는 어떻게 하시나요?Frontend/React 2022. 10. 14. 02:56
상태(state)란 무엇인가? React에서 상태관리를 어떻게 하느냐에 대한 답을 하기 전 state즉 상태란 react에서 무엇인가? 에 대한 얘기부터 해봐야 할 것 같다. 상태의 정의는 웹 어플리케이션을 render하는데 있어 영향을 미칠 수있는 값 이라고 말한다. react에서 페이지가 리랜더링 되는 가장 큰 예시 두가지는 props와 state라고 익히 들어 알고 있을 거라고 생각한다. 상태가 렌더링에 영향을 주기 위한 값으로 존재하기 위해서는 한 가지 요소가 필요하다. 바로 동적인 값, 즉 변하는 값이라는 조건이다. 그게 다시 말해서 State값이다! React에서 상태관리를 하는 이유 그렇다면 React에서 이러한 상태를 관리해야 하는 이유는 뭘까? 위에서 말했다 시피 react는 컴포넌트가 ..
-
[React] 3주차 중간발표 프론트 부분 정리 해둔 것Frontend/React 2022. 9. 14. 18:51
라이브러리 1. React-slick 메인페이지의 슬라이드 구현을 위해서 사용 목표페이지를 각각 만들어주는건 불필요한 렌더링을 야기시킨다고 생각하여 라이브러리를 사용하였고 다른 슬라이드 라이브러리에 비해 상대적으로 가볍고 심플하게 구현이 가능하여 선택했습니다. 2.React-html5-video-editor 메인의 각 하루하루 목표페이지에 동영상 등록 페이지에 적용하기 위하여 사용 사용자가 동영상을 1초만 찍어서 올리기엔 불편할 수도 있다고 생각하여 해당 라이브러리의 비디로 크랍기능을 사용해서 3초내지 5초짜리 동영상을 올려도 원하는 부분(1초)를 생각하여 올릴 수 있도록 구현을 생각해보았습니다. 라이브러리 선택 이유 동영상편집기능을 직접구현하기엔 시간이 너무 빠듯하였고 React-native쪽으론 동영..
-
[React] UI/UX란?Frontend/React 2022. 9. 9. 01:05
임민영 튜터님 강의. 1. 가시성 그 기능이 사용자 눈에 띄어야 함. 2. 피드백 사용자의 행위 후 일어난 변화를 적절하게 피드백해야 한다. 3. 제한요소 특정 상황에서 사용자가 해도 되는 것, 해선 안되는 것을 명확히 규정하고 제한 ex) 글을 작성중에 다른 페이지로 나갈 시 글이 날아간다면 날아갈 수도 있다고 인지 시키는 것? 4. 맵핑?? 사용자가 특별한 설명이나 도움없이 대상의 기능을 쉽게 떠올리고 이용가능 ex) 하트버튼을 누르면 좋아요, 별표는 즐겨찾기 등. 5. 일관성 적용된 디자인은 일정한 패턴이나 예측가능한 일관성을 지녀야 함 ex)사이트 디자인이 페이지마다 글씨체가 다르다던가 하면 안됨 6. 행동유도성 사용자에게 기대하는 행위가 인지, 유도 되어야함 무한스크롤 로딩상태 표시 (스켈레톤,..
-
[React] promise, async awaitFrontend/React 2022. 9. 6. 13:29
promise 1. Promise는 무엇인가? JavaScript(React)에서 Promise는 비동기 처리에 활용되는 객체이다. 여기서 비동기 처리란 line by line 순차적으로 특정 코드의 실행을 끝까지 기다리지 않고 다음 코드를 선제적으로 처리하는 것을 의미한다. 2. Promise의 역할 Promise는 주로 웹 서비스 구현 시 원활한 데이터 통신을 위해 활용된다. 더욱 구체적으로 말씀드리자면, 서버에 데이터를 요청했을 때, 데이터가 모두 받아오기 전에 웹에 출력하려고 할 때 발생하는 오류를 방지하기 위해 활용된다. 즉, Promise 객체는 A, B, C 로직이 있을 때, A 로직이 모두 완료될 때까지 B, C 로직을 대기시키지 않고 실행시키는 데 주로 활용된다. 3. Promise의 상..
-
[React] 부모 자식 컴포넌트의 흐름Frontend/React 2022. 7. 25. 13:37
부모 컴포넌트 A와 자식 컴포넌트 B가 있습니다. 컴포넌트 A는 state로 {name: "르탄이"}를 가지고 있고, 자식인 컴포넌트 B에게 name 값을 넘겨주었습니다. 컴포넌트 B는 받아온 name을 화면에 뿌려주고 있습니다. 컴포넌트 A의 state가 {name: "진도사우르스"}로 바뀌었을 때, 어떤 과정을 거쳐 바뀐 값을 화면에 보여주는 지 라이프 사이클 흐름을 그려볼까요? 컴포넌트란 리액트에서 컴포넌트란 화면을 구성하는 하나의 단위이다. // App 컴포넌트 function App (){ return } 하나의 블럭 개념인데 즉 그냥 함수이다. 리액트에서 컴포넌트를 만든다라는 건 return값으로 html을 반환하는 함수를 뜻한다. ### 흐름 설명 컴포넌트 A에서 “르탄이”라는 state를 ..