React/React 문법34 [React]children 함수(map, forEach, toArray, count, only) React에서 props.children을 다양하게 조작할 수 있는 함수들을 소개합니다. 목차 props.children을 순회하는 map, forEach 함수 개수와 관련 있는 count, only 함수 배열을 반환하는 toArray 함수 props.children을 순회하는 map, forEach 함수 React.Children.map은 자바스크립트 Array.prototype.map과 유사하지만, 동일하지는 않습니다. React.Children.map은 React에서 props.children을 다루기 위한 독자적인 API이며, React.Children.forEach 또한 마찬가지입니다. React.Children.map은 각 자식을 순회하여 함수를 호출하며, 함수가 반환하는 값들을 배열로 생성합.. React/React 문법 2021. 10. 19. [React]setState Callback 함수 사용 이번 포스팅에서는 React에서 setState의 Callback 함수를 사용하는 경우를 소개합니다. 목차 setState의 Callback 함수를 사용하는 경우 Class 컴포넌트의 setState Callback Function 컴포넌트의 setState Callback setState의 Callback 함수를 사용하는 경우 react에서 setState의 Callback 함수를 사용하는 경우는 state를 변경 후 변경된 state를 사용하는 경우입니다. 우선, Callback 함수를 사용하지 않은 경우 어떠한 문제가 발생하는지 알아봅시다. 다음은 [* 2] 버튼을 클릭하면 this.state.num의 값을 2배로 변경 후 콘솔에 this.state.num의 값을 출력하는 함수입니다. twiceBu.. React/React 문법 2021. 10. 18. [React]함수형 컴포넌트에 props 전달 이번 포스팅에서는 React에서 함수형 컴포넌트에 props를 전달하는 방법과 props의 개념에 대해 소개합니다. 목차 props 개념 부모 컴포넌트가 자식 컴포넌트에 props 전달 자식 컴포넌트가 부모 컴포넌트에 props 전달 정리 props 개념 React에서 애플리케이션을 설계할 때 컴포넌트 간 데이터의 흐름을 구조하는 것이 중요합니다. 여기서 말하는 컴포넌트 간 데이터의 흐름은 한 컴포넌트에서 다른 컴포넌트로 데이터 전달(props의 전달)을 의미합니다. props의 전달은 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 것이며, 자식 컴포넌트는 한 개가 될 수 있고 두 개 이상이 될 수 있습니다. 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 과정을 React와 프로그래밍 개념을 .. React/React 문법 2021. 10. 15. [React]props.children 사용 이번 포스팅에서 컴포넌트 간 합성(Composition)과 props.children을 소개합니다. 목차 합성(Composition)과 props.children props.children 필요성 props.children 메서드 자식과 자손 합성(Composition)과 props.children children이란? 공식 문서에는 props.children에 대해 아래와 같이 설명하고 있습니다. 어떤 컴포넌트들은 어떤 자식 엘리먼트가 들어올지 미리 예상할 수 없는 경우가 있습니다. 범용적인 ‘박스’ 역할을 하는 Sidebar 혹은 Dialog와 같은 컴포넌트에서 특히 자주 볼 수 있습니다. 저는 공식 문서에서 설명하고 있는 내용이 이해가 되지 않아서 props.children을 다음과 같이 해석하고 .. React/React 문법 2021. 10. 6. [React]Hook에서 prevState 구현 이번 포스팅에서는 React Hook에서 prevState를 구현하는 방법을 설명합니다. 미리 말씀드리자면, React Hook에서는 클래스 컴포넌트처럼 생명주기 메서드에서 prevState를 사용할 수 없습니다. React Hook에서 사용 가능한 useEffect를 활용한다면, 이전 state 값과 현재 state 값을 비교할 필요가 없기 때문입니다. 그럼에도 불구하고 이전 state 값과 현재 state 값을 비교해야 한다면, 커스텀 훅과 useRef를 활용하여 prevState처럼 사용할 수 있습니다. 목차 React 클래스 컴포넌트에서 prevState React Hook에서 componentDidMount 커스텀 훅과 useRef를 활용하여 prevState처럼 사용 React 클래스 컴포넌트.. React/React 문법 2021. 10. 5. [React]클래스 컴포넌트 생명주기 Hook으로 변경 이번 포스팅에서는 React에서 클래스 컴포넌트의 생명주기(LifeCycle)를 React Hook으로 변경하는 방법을 설명합니다. 목차 React 생명 주기 React Hook에서 componentDidMount React Hook에서 componentDidUpdate React Hook에서 componentWillUnmount 예제 코드 React 생명 주기 기본적인 React 생명 주기는 [마운팅(Mountin) → 업데이트(Update) → 마운트 해제(Unmounting)] 과정을 거치며, 클래스 컴포넌트에서는 각 과정을 담당하는 생명주기 메서드가 있습니다. componentDidMount 컴포넌트가 마운트 된 후 호출됩니다. 브라우저에서 한 번만 실행됩니다. axios, fetch 등을 사용하.. React/React 문법 2021. 9. 29. [React]import, export 사용 방법 React에서 애플리케이션의 크기가 커질수록 하나의 파일에서 코드를 작성하기에는 한계가 존재합니다. 이러한 문제를 해결하기 위해 자바스크립트에서는 모듈(module)이라는 기능을 지원하여 하나의 파일을 여러개의 파일로 나눌 수 있습니다. 위 사진은 App.js에서 Page와 관련된 로직을 컴포넌트로 분리하였으며, Page 폴더에서 관리하는 구조입니다. App.js가 Page 폴더 내부에 있는 파일들의 코드를 접근하는 방법은 두 가지 입니다. 방법 1. 파일경로를 직접 접근하여 import import DefaultPage from "./Page/DefaultPage"; import Page001 from "./Page/Page001"; import Page002 from "./Page/Page002"; .. React/React 문법 2021. 8. 6. [React]React에서 radio 버튼 사용하기 이번 포스팅에서는 React에서 radio 버튼을 사용하는 방법에 대해 정리합니다. 목차 radio 버튼을 클릭할 때마다 state 변경 radio 버튼 동적으로 추가 radio 버튼을 클릭할 때마다 state 변경 radio 버튼을 클릭할때마다 this.state.selectValue의 값이 변경되는 코드입니다. constructor this.state.selectValue의 값을 "Mac"으로 초기화합니다. constructor(props) { //... this.state = { selectValue: "Mac" }; } handleChange 이벤트 핸들러 함수 handleChange를 작성합니다. this.state.selectValue의 값을 이벤트가 발생한 타깃의 값으로 변경합니다. hand.. React/React 문법 2021. 8. 5. [React]super()와 super(props)의 차이 대부분 React 개발자들은 Class 컴포넌트를 구현할 때, constructor(props)에서 super(props)를 당연하게 사용했을 거라 생각합니다. class App extends React.Component { constructor(props) { super(props); //... } //... } 저 또한 super(props)를 당연하게 사용을 해왔기 때문에 아래 의문에 대해 답변을 할 수 없었습니다. 1. 생성자에서 super()를 호출하는 이유 2. super()에 props를 넘겨주는 이유 이번 포스팅에서는 super()와 super(props)의 차이에 대해 정리합니다. StackOverFlow에서 아래 질문에 대해 영감을 얻었으며, Dan Abramov가 작성한 글을 일부 번.. React/React 문법 2021. 8. 5. [React]컴포넌트의 렌더링을 지연하는 방법 React에서 컴포넌트의 렌더링을 지연하는 방법입니다. Class기반의 컴포넌트로 예제 코드를 작성하였습니다. 컴포넌트의 렌더링을 지연하는 방법이 경우에 따라서 처리되는 방법이 다르기 때문에 제 코드가 100% 정답은 아니라는 점 참고부탁드립니다. Class기반의 컴포넌트 새로고침을 클릭하시면, 3초 후 화면이 어떻게 바뀌는지 확인할 수 있습니다. 부모 컴포넌트에서 시간을 넘겨서 특정 시간이 지난 후 다시 렌더링되는 코드입니다. App.js Delay 컴포넌트에 3000이라는 값을 props로 전달합니다. 즉, Delay 컴포넌트는 3초 후 화면에 렌더링됩니다. class App extends Component { render() { return ( ); } } Delay.js Delay 컴포넌트는 th.. React/React 문법 2021. 8. 4. [React]컴포넌트에서 Esc 키 감지 React에서 Esc 키를 감지하는 방법입니다. React에서 지원하는 ref와 EventListener을 사용하여 Esc 키를 감지합니다. 예전에 포스팅한 컴포넌트 외부 클릭과 동일한 방법이므로 이번 포스팅에서는 Class기반의 컴포넌트의 코드만 작성하였으며, 자세한 설명도 생략하였습니다. 입력 컨트롤에 Esc 키를 누를 경우 Esc Press 라는 문구가 console에 출력되는 코드를 작성했습니다. Class기반의 컴포넌트로 구현 constructor 생성자에서 React.createRef()를 사용하여 escRef라는 ref를 생성하며, 이벤트 핸들러 함수를 바인딩합니다. constructor(props) { super(props); this.escRef = React.createRef(); th.. React/React 문법 2021. 8. 4. [React]조건부 렌더링 React에서 조건에 따라 로직을 처리해야 하는 코드를 작성해야 하는 경우가 존재합니다. 예전에 Route 조건부 렌더링하는 방법에 대해 간단하게 정리를 했는데요. 조건부 렌더링 하는 방법이 생각보다 다양해서 이번 기회에 조건부 렌더링을 처리하는 다양한 방법을 정리하였습니다. 코드 삼항 연산자 가장 기본적인 방법입니다. this.state.view의 값이 true일 경우 삼항 연산자를 반환하며, false일 경우 null을 반환합니다. class App extends Component { constructor(props) { super(props); this.state = { view: true }; } render() { return ( { /* 삼항 연산자 */ this.state.view === t.. React/React 문법 2021. 8. 3. 이전 1 2 3 다음