전체 글

오늘은 ES6의 변수 선언 방식인 let과 const에 대해 기존 var 변수와 비교해 변수의 재선언, 재할당이 가능한지 공부해보겠습니다. ES5에서 사용하던 var는 유연한 방식으로 변수를 재선언, 재할당 할 수 있습니다. 이런 특징으로 인해 변수의 사용 범위가 불확실해지거나 의도하지 않은 변숫값 변경이 발생할 수 있습니다. 따라서 이러한 var의 단점을 보완하기 위해 ES6에서 let와 const가 추가 되었습니다. App.js 파일 Variable.js 파일 이미 선언한 var 변수 varName을 다시 선언했을 때 var 변수는 재선언, 재할당을 허용하기 때문에 페이지가 정상적으로 출력됩니다. 이미 선언한 let 변수 letName을 다시 선언했을 때 에러메세지가 발생하며 let 변수는 재선언을 ..

ES(ECMA 스크립트)는 표준화된 스크립트 언어이고 ES 뒤에 붙은 숫자는 버전을 의미합니다. 2015년 발행된 ES6는 많은 유용한 기능이 추가됐고 자바스크립트는 이 기술 규격을 따릅니다. 리액트도 자바스크립트 기반 언어이기 때문에 ES6의 모든 기능을 사용할 수 있습니다. 오늘은 ES6 문자열의 사용 방법에 대해 알아보겠습니다. App.js 파일을 생성합니다. Es6.js 파일을 생성합니다. 기존 자바스크립트에서 줄바꿈을 하려면 개행문자(\n)을 사용해야 합니다. 문자열과 변수를 합치기 위해서는 문자열을 작은 따옴표(또는 큰따옴표)로 감싸고 + 로 연결해야합니다. 따옴표가 아닌 백틱(`)으로 전체 문자열과 변수를 묶어 사용할 수 있습니다. 변수는 ${변수명} 형태로 넣고 코드상에서 줄바꿈을 하면 개..

이전 포스트와 연결되는 내용입니다. shouldComponentUpdate() 함수는 component의 변경 과정에 속합니다. 변경이란 props 나 state의 변경을 말합니다. App.js LifeclycleEx008.js componentDidMount() 함수는 '생성'단계의 생명주기 함수 중 가장 마지막으로 실행됩니다. tmp_state2 라는 state변수에 true 라는 boolean 유형의 데이터를 세팅해주었습니다. setState() 함수는 변수의 선언과 초기화를 동시에 실행합니다. this.setState({tmp_state2: true}) 에서 state의 변경이 발생했기 때문에 ' 변경 ' 단계의 생명주기 함수 shouldComponentUpdate() 가 실행됩니다. should..

생명주기 함수가 생성될 때 , 업데이트 할 때 , 제거 할 때에 따라 실행되는 순서를 표시한 다이어그램입니다. 글씨가 진하게 표시된 함수는 자주 사용되는 함수입니다.

이전 포스트와 연결되는 내용입니다. componentDidMount()는 컴포넌트가 마운트된 직후, 즉 트리에 삽입된 직후에 호출됩니다. DOM 노드가 있어야 하는 초기화 작업은 이 메서드에서 이루어지면 됩니다. 외부에서 데이터를 불러와야 한다면, 네트워크 요청을 보내기 적절한 위치입니다. App.js LifeclyleEx007.js componentDidMount() 함수는 작성한 함수들 중 가장 마지막으로 실행됩니다. render() 함수가 return되는 html 형식의 코드를 화면에 그려준 후 실행됩니다. 화면이 모두 그려진 후에 실행되어야 하는 이벤트 처리, 초기화 등 가장 많이 활용되는 함수입니다. 콘솔창을 확인해보면 ,,! 짜잔!! 오늘도 즐공!

이전 포스트와 연결되는 내용입니다. getDerivedStateFromProps는 최초 마운트 시와 갱신 시 모두에서 render 메서드를 호출하기 직전에 호출됩니다. state를 갱신하기 위한 객체를 반환하거나, null을 반환하여 아무 것도 갱신하지 않을 수 있습니다. App.js 파일 LifecycleEx006.js 파일 getDerivedStateFromProps(props,state) 함수는 constructor() 함수 다음으로 실행됩니다. 컴포넌트가 새로운 props를 받게 됐을 때 state를 변경해줍니다. App.js에서 전달한 prop_value라는 변수를 props.prop_value로 접근해 값을 가져올 수 있습니다. 콘솔 창을 확인해봅시다. 현재 공부하고 있는 책에서는 이와 같은 ..

constructor(props) 함수는 생명주기 함수 중 가장 먼저 실행되며 , 처음 한번만 호출 됩니다. component 내부에서 사용되는 변수(state)를 선언하고 부모 객체에서 전달받은 변수(props)를 초기화 할때 사용합니다. super() 함수는 가장 위에 호출해야 합니다. 생명주기 함수들이 실행될 때 로그를 출력해 어떤 함수가 먼저 실행되는지 알아보겠습니다. src 폴더에 LifecycleEx005.js 파일을 생성한 후 App.js 에 이식하겠습니다. 결과를 확인해보면 ... constructor 함수가 실행된 후 render 함수가 실행된 것을 알 수 있습니다! 오늘도 즐공 ! ! 리액트

리액트에서 생명주기란, 컴포넌트의 생성, 변경 ,소멸 과정을 뜻합니다. render 함수는 그중에서 컴포넌트의 생성 과정에 속합니다. render() 는 return 되는 html 형식의 코드를 화면에 그려주는 함수입니다. 화면 내용이 변경되어야 할 시점에 자동으로 호출됩니다 . 예시로 LifecycleEx 라는 컴포넌트를 생성한 후 App.js에서 임포트해 사용해보겠습니다. 실행 결과를 확인해봅시다. 크롬 웹 브라우저에서 F12를 눌러 개발자 도구 창을 띄운 후 Console 탭을 클릭하면 render()함수에서 출력된 로그를 확인할 수 있습니다.

Component(컴포넌트): 특정 코드 뭉치를 다른 부분에 이식하거나 재사용하기 위해 사용하는 코드 블록 단위를 말합니다. Component를 파일 단위로 작성한 후 필요한 위치에서 임포트해 사용할 수 있습니다. ( 따라서 유지보수하기에 유리하겠죠 ? ) 파일구조 예시로 src 폴더에 ImportComponent.js 파일을 생성한 후 다음과 같이 입력합니다. return 된 html 코드를 render() 함수를 사용해 화면에 표시한다. 컴포넌트를 사용하기 위해선 ? App.js 파일과 같은 경로에 위치한 ImportComponent.js 파일을 임포트 한 후 , 컴포넌트 명을 태그와 함께 사용하면 된다 . 결과는....