React/React 문법34 [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]자식 컴포넌트가 부모 컴포넌트의 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]비동기로 동작하는 setState() React에서 state를 변경하는 setState()에 대해 설명합니다. setState() 호출 직후 this.state에 바로 반영이 되지 않습니다. 아래 예제를 통해 값이 바로 반영이 되는지 콘솔 창에서 확인을 할 수 있습니다. 최초 버튼을 클릭 했을 때, 아래와 같은 결과를 예상했습니다. *****1 번째 클릭***** setState() 호출 전 : 0, 0 First : 1, 1 Second : 1, 2 Third : 1, 3 하지만, 예상과 달리 아래와 같은 결과가 나왔습니다. *****1 번째 클릭***** setState() 호출 전 : 0, 0 First : 0, 0 Second : 0, 0 Third : 0, 0 React는 this.setState() 호출 후 this.state에.. React/React 문법 2021. 7. 15. [React]Key 이해하기 React에서 배열 요소를 렌더링하는 경우 map()을 사용합니다. 아래 예제는 header라는 array의 object 수만큼 ...를 렌더링하는 예제입니다. See the Pen by JaeSung2386 (@jaesung2386) on CodePen. 위 코드를 실행하면, 콘솔 창에서 아래 사진과 같은 경고문을 볼 수 있습니다. ※ CodePen에서는 에러 및 오류를 무시하는 경우가 있으므로 VSCode나 CodeSandBox와 같은 다른 툴에서 테스트하시면 됩니다. 「 list 내부 각 child는 고유한 "key" prop를 가져야 한다. 」 배열 요소를 map()을 사용하여 렌더링 하는 경우에는 key라는 prop가 필요합니다. key란 무엇인가? 재조정(Reconciliation)이 나타난 .. React/React 문법 2021. 7. 11. [React]이벤트 핸들러 바인딩(Event Handler Binding) 이벤트 핸들러 바인딩이란? 컴포넌트(Component)와 이벤트 함수를 연결(bind)하는 것입니다. 바인딩하지 않아도 이벤트 함수는 실행이 되지만, 누가(어떤 컴포넌트가) 호출을 했는지 알 수 없습니다. 바인딩하지 않았는데, 이벤트 함수에서 this.state 또는 this.props를 사용할 경우 undefined로 처리됩니다. 바인딩하지 않고 이벤트 함수에서 this를 사용하는 경우 class TestComponent extends React.Component { constructor(props) { super(props); this.state = { applyText: "빈 값" }; } NotBindingBtnClick() { console.log(this.state.applyText); } r.. React/React 문법 2021. 7. 7. [React]props 객체의 타입 검사 PropTypes 자바스크립트는 타입 검사에 유연하게 처리됩니다. Java에서 String str = "1"; 은 문자열이지만, 자바스크립트에서 var str = 1; 은 숫자가 될 수도 있고 문자가 될 수도 있습니다. React에서는 props 객체의 타입과 필수 여부 검사를 지원하는 PropTypes Module을 지원합니다. PropType Module 설치 npm install --save prop-types PropTypes Module Import import PropTypes from 'prop-types'; PropTypes Module 사용 코드 const node = document.getElementById("root"); const Search = (props) => { return ( ); } //.. React/React 문법 2021. 6. 29. [React]Route 조건부 렌더링 Route 조건부 렌더링 Route에서 조건에 따라 컴포넌트를 렌더링 하는 간단한 방법에 대해 설명합니다. Redirect로 처리하는 방법도 있으나 Redirect로 처리하는 방법은 추후 설명하도록 하겠습니다. 아래 코드는 http://localhost:3000/Dashboard로 접속 시 토큰이 존재할 경우 Dashboard 컴포넌트를 렌더링 하며, 토큰이 존재하지 않을 경우 Login 컴포넌트를 렌더링 합니다. ... function setToken(userToken) { localStorage.setItem('token', JSON.stringify(userToken)); } function getToken() { const tokenString = localStorage.getItem('token.. React/React 문법 2021. 6. 22. 이전 1 2 3 다음