FrontEnd/JS

React의 Life Cycle Method의 이해

리액트 라이프 사이클이란? 리액트는 컴포넌트 기반의 view를 중심으로 한 라이브러리이다. 그러다보니 각각의 컴포넌트에는 라이프 사이클 즉, 컴포넌트의 생명주기가 존재한다. 컴포넌트의 수명은 보통 페이지에서 랜더링되기 전인 준비 과정에서 시작하며 페이지에서 사라질 때 끝이난다. Mount(탄생) > Update, Re-render(변화) > Unmount(죽음) 각각의 이벤트가 발생할때 생성되는 메소드의 종류이다. Mount 1. constructor() 컴포넌트를 새로 만들때마다 호출되는 클래스 생성자 메서드 컴포넌트가 마운트되기 전에 호출 2. getDerivedStateFromProps(nextProps, prevState) props로 받아 온 값을 state에 동기화시키는 용도로 사용하며, 컴포..

JSX 내용 정리

React를 공부하다보니 일반적인 JS 가 아닌 JSX 라는 개념이 나와서 해당 내용에 대한 정리 및 차이점 등을 기술해보려한다. JSX란? const element = Hello, world!; 위에 희한한 태그 문법은 문자열도, HTML도 아닙니다. JSX라 하며 JavaScript를 확장한 문법입니다. UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것을 권장합니다. JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, JavaScript의 모든 기능이 포함되어 있습니다. - React 공식 홈페이지 - JSX = JavaScript + Xml (html) 개발자들은 게으르다 Js에서 기본적인 React 를 사용하기위해서는, createElement라는 요소로 태그를 생성할 필요가..

React Js의 기본 정리

React란? FaceBook (META) 사에서 개발한 오픈 소스 자바스크립트 라이브러리이다. AngularJs , Vue.js와 같은 자바스크립트 기반으로 제작되었으며, 웹에서 동적인 요소에 대해 필요한 부분만 업데이트를 진행하기에 Vanila Js와 비교하여 매우 빠른 퍼포먼스를 보여준다, 현재 넷플릭스, 디스코드, 트위치, 트위터, 페이스북, 인스타그램 등 정말 많은, 그리고 큰 기업 등에서 React를 사용하고 있다. 1. Vanila Js와의 차이 기본적인 구조에서 Vanila Js는 html을 생성한다. javascript로 해당 태그에 관한 값을 id 혹은 class를 통해 가져온다. event를 감지한다. 데이터를 업데이트한다. html을 업데이트한다. Total Clicks: 0 Cli..

Js의 일반함수, 익명함수

📌 "익명함수는 주로 어떤상황에서 사용하나요?" JavaScript내에서 함수는 일반함수와 익명함수로 나뉜다. ❗️일반함수 일반 함수는 다른 언어에서 함수를 선언하는 방식과 동일하다. // JS 함수 생성 function 함수명() { ... } 이때 JavaScript에서는 일반 함수가 쓰여진 위치에 상관없이 사용할 수 있다. 왜냐하면 일반 함수는 JS가 스크립트를 처음 읽을 때 해석해서 사용하기 때문인데, 이를 호이스팅 이라고 한다. 📌 호이스팅이란? 호이스팅은 JS가 처음 스크립트를 읽을 때 모든 객체 ( 변수, 함수 )의 선언부를 맨 위로 끌어올리는 것을 말한다. 즉 일반 함수는 (함수 명, 함수 로직 [바디 부분] ) 통째로 호이스팅 되어 맨 위로 올라가기 때문에 위치에 상관없이 사용할 수 있다..

null과 undefined의 차이점

null과 undefined를 보이는 그대로 해석하면 ‘빈 값’과 ‘없는 값’을 의미하는 것처럼 보이지만 사실 큰 차이점이 있다. 공통점 둘다 각각의 타입명(undefined, null)의 값이 유일하다. undefined 타입의 값은 undefined가 유일하다. null 타입의 값은 null이 유일하다. ❗️undefined 타입 undefined는 원시 자료형 undefined로 분류된다. undefined는 ‘아무 값도 할당받지 않은 상태’를 의미한다. var 키워드로 선언한 변수는 암묵적으로 undefined로 초기화된다. 변수 선언에 의해 확보된 메모리 공간을 처음 할당이 이뤄질 때까지 빈 상태(*대부분 비어 있지 않고 쓰레기 값이 들어 있다.)로 내버려두지 않고 자바스크립트 엔진이 undef..

JS 기술 정리

언제 document.write()를 사용하나요? document.write() 메소드는 웹 페이지가 로딩될 때 실행되면, 웹 페이지에 가장 먼저 데이터를 출력합니다. 따라서 document.write() 메소드는 대부분 테스트나 디버깅을 위해 사용됩니다. 하지만 웹 페이지의 모든 내용이 로딩된 후에 document.write() 메소드가 실행되면, 웹 페이지 내에 먼저 로딩된 모든 데이터를 지우고 자신의 데이터를 출력하게 됩니다. 따라서 document.write() 메소드를 테스트 이외의 용도로 사용할 때에는 충분히 주의해서 사용해야 합니다. 반응형 디자인은 적응형 디자인과 어떻게 다른가요? 반응형 디자인과 적응형 디자인의 주요 차이점은 레이아웃입니다. 이 레이아웃은 둘 다에 대해 사전 설정되지만 사..