![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/domCUV/btq2AFFTyfD/AMpFxBYZOFrjFRiksdZr7K/img.gif)
접근성 웹 접근성은 웹 사이트에서 제공하는 정보를 제한/차별없이 제공하는 것을 의미한다. React는 웹 접근성을 준수하여 개발할 수 있도록 모든 지원을 하며 대부분 표준 HTML기술이 사용된다고 한다. JSX에서는 모든 * 을HTML 속성을 지원한다. 대부분의 Dom property와 attribute에 대한 값은 camelCase로 지원되고, area-*와 같은 attribute는 일반적인 HTML과 마찬가지로 hypen-case로 작성해야 한다. setData(e.target.value)} value={data} /> 시맨틱 HTML 접근성의 기초이다. 정보의 의미가 강조되는 HTML element를 웹 사이트에서 사용하면 자연스럽게 접근성이 갖추어진다. React로 구성한 코드가 div와 같은 e..
React는 강력한 합성 모델을 가지고 있고, 상속 대신 합성을 사용하여 컴포넌트 간 코드를 재사용할 수 있다. 컴포넌트에서 다른 컴포넌트를 담을 수 있다. 어떤 컴포넌트들은 어떤 자식 element가 들어올 지 미리 예상할 수 없는 경우가 있다. 이러한 경우 child prop을 사용하여 자식 element를 출력에 그대로 전달하는 것이 좋다. interface Props{ children : React.ReactNode; } function Wrapper({children} : Props) { return ( {children} ); } 이러한 방식으로 다른 컴포넌트에 JSX를 중첩하여 임의의 자식을 전달할 수 있다. function Components1() { return ( 내용1 내용2 ); }..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/bSEaou/btq16RgkpAO/W6LIyQlJD6d8yjwPMKgGK1/img.png)
동일한 데이터에 대한 변경사항을 여러 components에 반영할 일이 있다. 이럴 경우 가까운 트리로 state를 끌어올릴 수 있다. 2개의 자식 컴포넌트가 있고 각 컴포넌트는 독립적인 상태를 가지고 있다. 여기서 두 컴포넌트의 상태를 동기화 하고싶다. 여기서 state를 공유하는 일은 그 값을 필요로하는 컴포넌트간 가장 가까운 공통 조상으로 state를 끌어올리기하여 진행할 수 있다. State끌어올리기 현재 두 컴포넌트가 각각의 입력값을 각자의 state에 독립적으로 저장하고 있다. 자식 컴포넌트의 각각의 state는 제거하고 그 상태를 부모 컴포넌트에 옮겨 놓는다. 이제 각각의 상태는 하나의 컴포넌트(부모 컴포넌트)에 저장이 된다. 이를 SOT(source of truth, 진리의 원천이래;;;;..
HTML에서 form은 자체적인 상태를 가지고 있고, 리액트와 조금 다르게 동작함. 만약 name을 입력받는 form이 있을 경우, 사용자가 form을 제출하면 새로운 페이지로 이동하는 기본 HTML form 동작을 수행한다. Name: 하지만 대부분 Javascript function으로 form의 제출을 처리하고 사용자가 form에 입력한 데이터에 접근하도록 하는 것이 편리, 제어컴포넌트라는 기술을 이용함. 제어 컴포넌트(Controlled Component) HTML에서 input, textarea, select와 같은 form element는 일반적으로 사용자의 입력을 기반으로 state를 관리하고 업데이트 함. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 ..
이벤트 처리 React의 이벤트는 camelCase naming사용을 사용 Button 새 페이지를 기본동작 방지 방법 e.preventDefault(); const submit = (e : React.ChangeEvent){ e.preventDefault(); } click 조건부 렌더링 js의 조건분기처리와 같이 동작함 if(redirect === true){ return ; } return ( 다시 시도하십시오 ); 변수에 element를 할당하여 그대로 rendering하는 방법 const isLoggedIn = this.state.isLoggedIn; let button; if (isLoggedIn) { button = ; } else { button = ; } return ( {button} ..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/3Gcr6/btq1QnsNZqm/EL1MCQNbdSqTdI9hTtfbOK/img.png)
React 컴포넌트의 상태(State)와 생명주기(Lifecycle) State React는 트리형태이고, 자식 컴포넌트는 필요한 데이터를 부모 컴포넌트로부터 Props(Properties)를 받아서 사용을 할 수 있다. 하지만 Props는 읽기전용(props를 수정하면 안된다)이므로 컴포넌트 내에서 데이터의 수정이 필요한 경우에 state에서 변경할 데이터를 관리한다. 따라서 모든 컴포넌트는 state를 가지고 있다. state에서 데이터의 변경을 감지하면 데이터가 변경된 컴포넌트와 그 자식컴포넌트는 Rerendering하여 화면에 출력한다. state는 React의 컴포넌트 내에서 관리되는 일반 Javascript객체이다. 클래스 컴포넌트에서 state 키워드로 데이터를 할당하고, 데이터 변경이 필요..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/eenmys/btq1I7x9L6X/qK2S6Rbi3czhtZH68ogFjk/img.png)
컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다. 컴포넌트는 Javascript의 함수와 유사하다. props라는 parameter를 받아서 화면에 어떻게 표시되는지 작성한다. Components는 함수 컴포넌트와 클래스 컴포넌트가 있다. 이전에 간략히 작성해둔 함수 컴포넌트와 클래스 컴포넌트에 대한 내용이다 kmj24.tistory.com/22 [React]Function Component, Class Component 컴포넌트를 function으로 선언하는것과, class로 선언하는 각각의 방식이 있다. 2가지 선언방식은 어떤점에서 차이가 있을까? 이름 그대로 class component(이하 CC)는 class를 기반으로 작성되는 컴포넌 k..
Element는 React Application의 가장 작은 단위이다. //Element의 형태 const element = Element React의 Element는 일반 객체(plain object)를 쉽게 생성할 수 있다. React DOM은 React Element와 일치하도록 DOM을 업데이트 한다. HTML 파일 어딘가 가 있다고 가정해 봤을 때, 이것을 root DOM node라고 한다. React로 구현된 Application은 일반적으로 하나의 root DOM node가 있고, react를 기존 Application에 통합하려는 경우 원하는 만큼 많은 수의 독립된 root DOM node를 가질 수 있다. React 엘리먼트를 root DOM node에 렌더링 하려면 둘다 ReactDOM..