React48

• 

  [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.

• 

  [React]태그의 이름을 동적으로 처리 React에서 Tag의 이름을 동적으로 처리하는 방법입니다. StackOverFlow의 아래 질문을 참고하여 코드를 작성하였습니다. https://stackoverflow.com/questions/33471880/dynamic-tag-name-in-jsx-and-react Dynamic tag name in jsx and React I try to write a React component. for html heading tags(h1,h2,h3,etc...), where the heading priority dynamically changing based on the priority we have defined in the props. Here what I try to do.... stackoverfl.. React/React 문법 2021. 8. 3.

• 

  [React]전달받은 props로 state값을 초기화 React는 일반적으로 부모 컴포넌트에서 자식 컴포넌트로 값을 전달하는 구조로 되어있습니다. 그리고 컴포넌트에서 사용되는 값의 상태는 state와 props로 분류가 됩니다. state 현재 컴포넌트에서 사용하는 값(수정 가능) props 부모 컴포넌트에게 전달받은 값(수정 불가능) 이번 포스팅에서는 state를 부모 컴포넌트에게 전달받은 값인 props로 초기화하는 방법에 대해 작성합니다. StackOverFlow의 아래 질문을 질문을 참고하여 작성합니다. https://stackoverflow.com/questions/40063468/react-component-initialize-state-from-props React component initialize state from props In Rea.. React/React 문법 2021. 8. 3.

• 

  [React]input Element 포커싱 처리 StackOverFlow를 눈팅하던 도중 2015년에 작성된 흥미로운 글을 발견했습니다. 렌더링 후 input Element를 포커싱 처리를 어떻게 하는지 질문하는 글이었습니다. https://stackoverflow.com/questions/28889826/how-to-set-focus-on-an-input-field-after-rendering How to set focus on an input field after rendering? What's the react way of setting focus on a particular text field after the component is rendered? Documentation seems to suggest using refs, e.g: Set .. React/React 문법 2021. 8. 3.

• 

  [React]컴포넌트 외부 클릭을 감지 StackOverFlow를 눈팅하던 도중 2017년에 작성된 흥미로운 글을 발견했습니다. 컴포넌트 외부 클릭을 어떻게 감지하는지 질문하는 글이었습니다. https://stackoverflow.com/questions/32553158/detect-click-outside-react-component Detect click outside React component I'm looking for a way to detect if a click event happened outside of a component, as described in this article. jQuery closest() is used to see if the target from a click event has the dom eleme.. React/React 문법 2021. 7. 28.

• 

  [React]Recoil 간단한 예제 코드 Recoil 라이브러리의 필요성 지난 포스팅에서는 자식 컴포넌트가 부모 컴포넌트의 state를 변경하는 방법에 대해 알아보았습니다. 그리고 부모 컴포넌트의 state가 변경되면서 부모 컴포넌트에 속하는 모든 자식 컴포넌트들이 re-render 되는 것도 알게 되었습니다. Recoil 라이브러리는 모든 자식 컴포넌트들이 re-render 되는 것을 방지하기 위해 탄생한 상태 관리 라이브러리입니다. 부모 컴포넌트의 state를 공유하지 않고 Atoms이라는 저장소에 상태를 관리합니다. 컴포넌트들은 Atoms에 접근하여 상태를 공유하기 때문에 상태를 공유하기 위해서 더 이상 부모 컴포넌트의 state에 의존하지 않아도 됩니다. Recoil 라이브러리의 자세한 내용 및 사용 방법은 아래 공식 문서를 참고 부탁드.. React/유용한 NPM 2021. 7. 25.

• 

  [React]자식 컴포넌트가 부모 컴포넌트의 state 변경 자식 컴포넌트가 부모 컴포넌트의 state를 변경 설명할 컴포넌트의 구조는 아래 사진과 같습니다. 컴포넌트의 역할 index : 최상위 컴포넌트 어떠한 동작도 기능도 존재하지 않음 App : View 컴포넌트와 ButtonComponent 컴포넌트에 전달하는 state를 관리하고 있음 NotWork : 어떠한 동작도 기능도 존재하지 않음 ButtonComponent : 버튼 클릭 시 App 컴포넌트의 state에 데이터를 추가함 View : App 컴포넌트의 state를 화면에 출력함 ※ CodeSandBox에서 Button.js 파일을 만들 수가 없어서 ButtonComponent로 생성하였습니다. 큰 의미는 없습니다. 샘플 App의 컴포넌트의 state를 변경하는 함수를 ButtonComponent .. React/React 문법 2021. 7. 23.

• 

  [React]Warning: A component is changing an uncontrolled input to be controlled. 경고 『 A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. 』 해석 '컴포넌트는 제어할수없는 input을 제어하기 위해 변경하고 있습니다. 해당 경고는 undefined에서 정의된 값으로 변경할려고 해서 발생하였으며, 이러한 경우는 발생해서는 안됩니다. 컴포넌트의 일생동안 input .. React/기타 2021. 7. 22.