React Effect Hook useEffect는 컴포넌트 내에서 Side Effect를 실행할 수 있게 하는 Hook이다. useEffect는 두 가지 인자를 전달받는데, 첫 번째 인자는 함수이며 두 번째 인자는 언제 배열을 받아 언제 실행될지를 결정한다. 두 번째 인자로 전달받는 배열을 dependency array라고 하며, 배열에...

Interview Side Effect(부수효과) 어떤 구현이 함수 외부에 영향을 끼치는 경우를 말한다. 컴포넌트 내에서 fetch를 사용해 API 정보를 가져오거나 이벤트를 활용해 DOM을 조작할 떄 Side Effect가 발생했다고 말한다. 외부 변수를 참조하거나 변경하는 효과이다. let side = "effect"; fun...

React 상태끌어올리기 리액트에서의 데이터는 위에서 아래로 흐르는데, 이를 데이터 하향식 흐름이라고 한다. 데이터는 단방향으로 흐르는데, 상위 컴포넌트에서 하위 컴포넌트로 state를 전달할 때 props를 통해 하위 컴포넌트가 이를 전달받고, prop이 어디서 왔는지 쉽게 알 수 있다. 하나의 state를 두 개의 컴포넌트가 사용한다고...

React SPA Single-Page-Application의 약자이다. 사용자에 요청에 페이지 전체를 바꿔서 보여주는 방식이 아닌 필요한 부분만을 로딩하는 방식이다. 기존 브라우저는 웹페이지를 미리 준비해두었다가, 서버 측에서 데이터를 전달받아 렌더링하는 방식이었다. 규모가 커지고 사용자와의 상호작용이 많아짐에 따라 기존의 서버 ...

CS SSR Server Side Rendering의 약자이다. 클라이언트측에서 서버의 HTML로 렌더링하는 방식이다. SSR 방식 사용자가 웹 페이지를 방문하면(request), 서버는 리소스를 확인하고 페이지 내에 있는 서버측 스크립트를 실행 후 HTML 컨텐츠를 컴파일 및 준비한다. 컴파일된 HTML을 클라이언트의 브라...

React state prop가 컴포넌트에 매개변수로 전달되는 역할을 한다면, state는 컴포넌트에 대한 데이터 또는 정보를 포함하는 데 쓰이는 객체이다. 저장된 state는 값이 바귈 때마다 컴포넌트를 다시 렌더링시킨다. state는 여러 속성을 지정할 수 있으며 useState를 통해 값을 변경(추가,삭제)시키기도 한다. 비동식이...

React event React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트를 처리하는 방식과 비슷하다. 이벤트는 소문자 대신 카멜 케이스를 사용한다. JSX를 활용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다. // DOM <button onclick="activateLasers()"> Activate...

React 컴포넌트 줄이기 function App(){ return ( <div> <header> <h1><a href="/">WEB</a></h1> <header> ...

React 리액트는 HTML/CSS/JS로 나눠적기보다 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향한다. 하나의 기능을 구현하기 위해 여러 종류의 코드를 묶어둔 컴포넌트 를 사용한다. 컴포넌트를 분리하면 서로 독립적이고 재사용성이 높아 기능 자체에 집중할 수 있다. JavaScript 라이브러리이기...

변수와 할당 구구단 예시 console.log(2 * 1); // 2 console.log(2 * 2); // 4 console.log(2 * 3); // 6 console.log(2 * 4); // 8 console.log(2 * 5); // 10 console.log(2 * 6); // 12 console.log(2 * 7); // 14...