JavaScript[JS]25 [React] react life cycle (리액트 생명주기) 순서, 역할 생명주기 순서 1. 생명주기의 1단계 - 생성(Mounting) 컴포넌트의 state가 constructor에 의해 초기화되고, rendering과정을 거쳐 DOM에 최초로 그려지는 단계 ▶생성단계의 흐름 1. 컴포넌트의 base state가 최초로 constructor에 의해서 초기화 된다. 2. 초기화가 완료되면 render() 메소드가 실행된다. render()는 JSX로 작성된 코드를 자바스크립트가 이해할 수 있도록 변환한 후 HTML 형태로 DOM에 그려질 수 있도록 돕는 역할을 한다. (위 두개의 단계가 끝나면 리액트는 화면에 표시해야 하는 컴포넌트가 어떻게 생겼는지, 어떠한 데이터를 가지고 있는지 알게 된다.) 3. 이제 실제로 DOM에 컴포넌트를 최초로 표시한다.(mounting) 4. m.. 2022. 12. 1. [React] sideEffect/useEffect/cleanupEffect 1. sideEffect (=부작용, 부수효과) - 함수가 어떤 동작을 할 때 input-output이 외에 다른 값을 조작하는 것 - 렌더링이 아니고 외부세계에 영향을 주는 어떠한 행위 렌더링 : state,props 기반으로 UI요소를 그려내는 행위 : 여기서 UI요소란 화면에 JSX문법으로 무엇이 나타날지 적어둔 컴포넌트들 2. useEffect - sideEffect를 렌더링 이후에 발생시킴 - useEffect가 수행되는 시점에 이미 DOM이 업데이트 되었음을 보장한다는 뜻 ☞ sideEffect가 렌더링에 영향을 주지않도록 설계 - sideEffect 이후 업데이트된 정보가 있자면 새롭게 렌더링 Effect타이밍 ☞ useEffect의 Dependency Array에 변화가 있는 경우 3. c.. 2022. 11. 23. [React] 화살표 함수 화살표 함수(arrow function)는 ES6에 추가된 표현식을 사용하는 함수로 화살표 => 사용 ◆ 기존함수 표현법 ◆ 화살표 함수 표현법 : return 없이도 함수 실행을 종료시키고 값을 반환 { return } = 처리하는 것에 따라 결과가 계속 나오는 경우 {}와 return 사용 return X = ( )안에 있는 것을 한번에 return 하는 경우 return 사용X 2022. 11. 17. [Ajax] ajax란? / response 응답데이터 Ajax 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발기법(비동기방식) 전체를 다시 로딩하지 않고, 웹페이지의 일부분만 갱신할 수 있음 동기방식 : 요청한 작업에 대해 관심을 가지고 기다리는 방식, 요청을 했을 때 시간이 많이 걸려도 결과를 기다림 비동기방식 : 요청한 작업에 대해 관심을 버리고 기다리지 않는 방식, 요청을 하고 다른일을 처리 Ajax의 장점 웹 페이지 전체를 다시 로딩하지 않고, 웹 페이지의 일부분만을 갱신할 수 있음 웹 페이지가 로드된 후에 서버로 데이터 요청을 보낼 수 있음 웹 페이지가 로드된 후에 서버로부터 데이터를 받을 수 있음 백그라운드 영역에서 서버로 데이터를 보낼 수 있음 서버와 다양한 형태의 데이터를 주고받음 (JSON, XML, HTML, TEXT파일 등) Aja.. 2022. 9. 7. [JS] DOM 요소 (getElementById,getElementByName,getElementsByTagName,getElementsByClassName) DOM 요소의 선택 - HTML요소를 다루기 위해서는 우선 해당요소를 선택해야만 함 - 자바스크립트에서 특정 HTML 요소를 선택하는 방법 HTML 태그이름(tag name)을 이용 → getElementsByTagName() id 이용 → getElementById() class 이용 → getElementsByClassName() name 속성(attribute) 이용 → getElementByName() getElementsByTagName() 메소드 - tag name을 이용하여 HTML 요소를 선택 getElementById() 메소드 - 아이디를 이용하여 HTML요소를 선택 - 해당아이디를 가지고 있는 요소 중에서 첫 번째 요소 단 하나만 을 선택 getElementsByClassName() .. 2022. 9. 6. [JS] 자바스크립트(JavaScript) 란? 자바스크립트란? - 자바스크립트는 객체(object) 기반의 스크립트 언어 - 객체지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있음 HTML : 웹의 내용 작성 CSS : 웹 디자인 JS : 웹의 동작 구현 자바스크립트 문법 - 식별자 작성 방식 : 관행적으로 CamelCase방식을 많이 사용 자바스크립트 출력 - 대부분 에 function을 쓰고 에서 출력! - 여러 방법을 통해 결과물을 HTML페이지에 출력할 수 있음 window.alert()메소드 HTML DOM요소를 이용한 innerHTML 프로퍼티 document.write()메소드 console.log()메소드 window.alert( ) 메소드 : 별도의 대화상자를 띄워 사용자에게 데이터전달 innerHTML 프로퍼티 : 가장 많.. 2022. 9. 6. [JS] BOM 과 DOM의 차이 BOM(Browser Object Model) 자바스크립트가 브라우저와 소통하기 위해 만들어진 모델 window 최상위객체, 각 프레임 별로 하나씩 존재 navigator 브라우저명, 버전 정보를 속성으로 가짐 document 현재 문서에 대한 정보 location 현재 URL에 대한 정보, 브라우저에서 사용자가 요청하는 URL history 현재의 브라우저가 접근했던 URL history screen 브라우저의 외부환경에 대한 정보 제공 DOM(Document Object Model) 브라우저가 웹문서를 이해할 수 있도록 구성된 것 HTML 이나 XML 등의 문서를 객체로 표현할 때 사용되는 API 문서노드(Document Node) 트리 최상위에 존재 각각의 하위요소들에 접근하려면 문서노드를 통해야함.. 2022. 9. 6. 이전 1 2 3 다음
