짹뚜 스튜디오

CSR (Client Side Rendering) CSR이란 렌더링이 클라이언트에서 일어나는 것을 뜻한다. 서버에 HTML과 JS 파일 요청을 보내면 서버가 파일들을 보내주고 클라이언트에는 파일들을 받아서 렌더링을 한다. 사용자의 행동에 따라 필요한 부분만 서버에 요청을 해서 렌더링 하기 때문에 빠른 인터렉션을 기대할 수 있다. 첫 페이지 로딩 시간이 길다. 서버에서 HTML 파일을 받지만 HTML 파일 내부에는 아무런 내용이 없다. React를 예로 들면, index.html 에는 만 존재한다. 그래서 HTML 파일을 받고 JS 파일을 받은 후에 JS 파일을 실행하면서 렌더링이 된다. 그래서 필요한 파일을 모두 받은 후에 렌더링이 되기 때문에 초기 로딩 시간이 길다. 나머지 페이지를 로딩하는 시간은 빠..

javascript에서 특정 DOM은 선택해야 하는 경우에는 querySelector와 같은 DOM Selector 함수를 사용을 한다. React에서도 간혹 특정 DOM을 선택해야 하는 경우가 있다. 특정 엘리멘트의 크기를 가져올 때 현재 스크롤의 위치를 가져올 때 미디어를 실행 또는 정지 할 때 애니메이션을 적용할 때 DOM 기반 라이브러리를 사용할 때, 등등 이럴 때 사용할 수 있는 것이 useRef이다. useRef로 DOM 노드, 엘리멘트 그리고 React 컴포넌트의 주소 값을 참조할 수 있다. const textInput = useRef(null); return( ) 이렇게 가져온 주소값은 컴포넌트가 re-render 되어도 바뀌지 않는다. 그리고 useRef로 관리되고 있는 변수의 주소 값이..

useEffect Hook은 함수 컴포넌트에서 Side Effect를 처리할 수 있게 한다. Side Effect 함수가 실행되면서 함수 외부에 존재하는 값들에 영향을 끼치는 것을 Side Effect라고 한다. 예를 들어 웹페이지의 Title을 변경하거나, fetch 함수로 데이터를 가져오거나 등등이 Side Effect에 속한다. 이러한 Side Effect를 처리하기 위해서 React에서는 useEffect()를 사용한다. useEffect useEffect의 첫 번째 인자로는 콜백 함수를 받는다. 이 콜백 함수는 useEffect가 호출될 때 실행이 된다. 컴포넌트 생성, 새로운 props 전달, state 변경이 일어나고 렌더링이 된 다음에 useEffect가 호출된다. 두 번째 인자로는 Dep..

State는 컴포넌트 안에서 변경될 수 있는 데이터들을 관리하는 데 사용한다. 또한 state 데이터가 변경이 되면 react는 render 함수를 호출해서 화면에 변경된 값을 바로 보여준다. state는 클래스형 컴포넌트에서만 사용이 가능했는데 리액트 16.8에서 Hooks라는 기능이 도입되면서 함수형 컴포넌트에서도 state 사용이 가능해졌다. Hooks 중에서 state를 관리하는 것이 useState이다. useState useState는 state 데이터를 관리해주는 함수로 인자 값으로는 state 데이터의 초기값을 받는다. 그리고 배열을 반환하는데 첫 번째 인덱스에는 현재 state 값이 있고 두 번째 인덱스에는 state 데이터를 변경해주는 함수가 있다. state를 사용하고 싶으면 다음과 ..

props는 property의 약자로 외부로부터 전달받은 데이터 또는 부모로부터 전달받은 데이터를 의미한다. React의 data flow는 단방향 (One-way data flow)으로 부모가 자식에게 데이터를 전달할 수는 있지만 반대로 자식이 부모에게 데이터를 전달할 수는 없다. 그러므로 props를 수정하는 것은 불가능하다 (읽기 전용). 현재 Functional Component로 공부를 하고 있기 때문에 앞으로의 예제들은 Functional Component를 기반으로 작성될 것이다. props 전달하기 부모 컴포넌트에서 자식 컴포넌트로 props 데이터를 보내려면 html 태그에 속성(property)을 부여하는 것처럼 작성하면 된다. function Parent() { return ; } 만..

SPA (Single Page Application) 전통적인 웹페이지에서는 페이지를 이동할 때마다 전체 페이지를 서버에 요청한 후에 보여준다. 그러다 보니 페이지 내의 중복되는 부분들도 매번 요청하는 불필요한 트래픽이 발생하고 사용자 입장에서는 느린 반응성을 경험하게 된다. 그래서 문서 전체를 요청하는 게 아닌 업데이트가 필요한 부분의 데이터만 받아서 javascript가 동적으로 화면에 보여주는 방식인 SPA (Single Page Application)이 등장하게 되었다. 장점 사용자의 interaction에 빠르게 반응한다. 서버 과부하 문제가 줄어든다. 더 나은 사용자 경험을 제공한다. 단점 SPA의 경우 javascript 파일의 크기가 크다. 그러다 보니 HTML 파일을 읽어올 때 scrip..

JSX는 javascript를 확장한 문법으로 React에서 UI를 구성할 때 사용한다. const element = Hello JSX는 브라우저에서 바로 실행할 수 있는 javascript 코드가 아니기 때문에 Babel이라는 컴파일러로 먼저 javascript 코드로 변환을 한 다음에 실행이 된다. 규칙 JSX는 하나의 element만 반환해야 한다. 즉, 여러 개의 element를 반환하고 싶다면 반드시 하나의 부모 element 안에 모두 넣어야 한다. //에러가 발생한다. function App(){ return ( hello world ) } //두개의 자식 element를 하나의 부모 div element로 묶어서 return 해야한다. function App(){ return ( hello..

React 공식 웹사이트를 가면 React를 한 문장으로 잘 설명하고 있다. A JavaScript library for building user interfaces 웹 페이지를 만들기에는 html, css, javascript만 있어도 충분하지만 React를 활용하면 유저 인터페이스를 좀 더 쉽고 효율적으로 만들 수 있기 때문에 많은 사람들이 자바스크립트 라이브러리인 React를 사용한다. React 특징 Declarative (선언형): 선언형은 How(어떻게) 보다는 What(무엇)을 더 중요하게 생각한다. 어떤식으로 코드를 작성해서 원하는 결과를 얻는지 모든 과정을 작성하지 않고 무엇을 원하는지를 작성한다. // 주어진 배열에서 5 보다 작은 요소들만 골라서 새로운 배열을 만들고 return 해준..