props 사용하기 - 컬러 팔레트 만들기 1단계 - ColorPalette 컴포넌트를 화면에 배치: <div id="root"></div> #root { padding: 10px; } class ColorPalette extends React.Component { render() { let palet...

props를 객체형으로 사용하기 props 값을 객체로 하위 컴포넌트에 전달할 경우, 자료형을 object로 선언한다. <div id="root"></div> #root { padding: 10px; } class Props extends React.Component { render() { // con...

props 사용하기 props는 부포 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 사용한다. props를 전달받은 자식 컴포넌트에서는 데이터를 수정할 수 없다. 데이터를 변경하기 위해서는 컴포넌트 내부에서만 사용하는 변수에 값을 넣어 사용해야 한다. <div id="root"></div> #root { padd...

React에서의 EcmaScript6 문법 3 forEach() 함수 사용하기 배열 함수 forEach()는 for 구문에서 사용하던 순번과 배열의 크기 변수를 사용하지 않는다. 배열의 처음부터 마지막 순번까지 모두 작업하는 경우 forEach() 함수를 사용하는 것이 편하다! 하지만 특정 순번에서만 배열 값을 사용하거나 변경해야 하는 상황...

React에서의 EcmaScript6 문법 2 전개 연산자 (…) 사용하기 전개 연산자는 배열이나 객체를 좀 더 직관적이고 편리하게 합치거나 추출할 수 있게 도와주는 문법이다. 사용 방법으로는 변수 앞에 마침표 3개 (…)를 입력한다. <div id="root"></div> #root { padding: 10px...

React에서의 EcmaScript6 문법 1 EcmaScript는 표준화된 스크립트 언어이고 숫자는 버전을 의미한다. 2015년에 발행된 ES6는 많은 유용한 기능이 추가되었고, JavaScript는 이 기술 규격을 따른다. React 역시 JavaScript 기반의 라이브러리이기 때문에 ES6의 모든 기능을 사용할 수 있다. 템플릿 문자...

React 생명 주기 함수 React에서 생명 주기란, 컴포넌트의 생성, 변경, 소멸 과정을 뜻한다. render(), constructor(), getDerivedStateFromProps(), componentDidMount() 함수들이 컴포넌트 생성 과정에 속한다. 생명 주기 함수 사용하기 생명 주기 함수 render() 사용하기 ...

React 컴포넌트 이해 React에서 컴포넌트를 사용해 다른 파일에 있는 HTML 코드를 이식하여 사용할 수 있다. 컴포넌트에서 대해서 다시 집고 넘어가자면, 컴포넌트는 특정 코드 뭉치를 다른 부분에 이식하거나 재사용하기 위해 사용하는 코드 블록 단위를 말한다. 컴포넌트를 파일 단위로 작성한 뒤, 필요한 위치에서 로드해서 사용할 수도 있다!...

React 컴포넌트 스타일 이해하기 1 컴포넌트 이해 2 컴포넌트에서 개별적인 속성을 정의할 수 있다. ReactDOm에서 호출된 컴포넌트에서 전달한 속성은 {this.props.propsValue} 방식으로 전달 받는다. 여기서 this는 아래의 HelloReact 컴포넌트를 의미한다. 이런 작업을 binding, 바인딩이라고 한다! 전...

React 컴포넌트 스타일 이해하기 컴포넌트 이해 컴포넌트란???? -> 화면을 구성하는 구성 요소를 의미한다 사용 예시: <div id="root"></div> const root = ReactDOM.createRoot(document.getElementById("root")); root.render(...