Javascript/React (26) 썸네일형 리스트형 [React] setState() 활용 - componentDidMount() 실무에서 setState를 비동기적으로 활용하기 해당 예시는 tick() 이라는 초당 업데이트 함수를 정의하여 랜더링 이후 즉시 호출되는 함수인 componentDidMount()를 사용해 랜더링 될 때마다 시간을 업데이트 하는 로직이다. 예시 소스에 앞서 setState는 비동기 함수라는 것과, 실제 랜더링이 이루어지는 render() 함수와 생성자, 그리고 현재 클래스를 종료 시키는 componentWillUnmount() 함수 에서는 setState() 함수를 실행할 수 없다는 것을 알고 있어야 한다. 예시 소스 import React from "react"; class Timer extends React.Component { constructor(props) { super(props) this.s.. [React] Key Warnings 해결 방법 Map함수를 사용하여 반복되는 컴포넌트 혹은 JSX 요소 들을 랜더링 하다 보면 key Warning라는 오류가 콘솔창에 뜨는 것을 자주 볼 수 있다. 예시 import React from 'react'; import './App.css'; function App() { const iter = [0,1,2] return ( { iter.map(item => item) } ) } export default App; 해당 소스 코드 입력 후 localhost:3000에 접속하면 개발자 도구(F12)에 이미지와 같은 오류가 뜨는 것을 확인할 수 있다. 에러를 간단히 읽어보면 유니크한 key가 필요함을 알 수 있다. div 안에 iter.map 부분을 아래와 같이 바꾸면 에러가 사라진다. iter.map(ite.. [React] Event Handling onClick (feat. 이벤트 버블링(event bubbling) 본 예시는 React에서 onClick 이벤트를 실행하는 방법입니다. onclick을 onClick camelCase로 표기하는 것 이외에는 큰 차이는 없습니다. 예시 소스 import React from "react"; function App() { const handleClick = () => { alert('button is clicked'); } return ( // camelCase 표기법으로 표기 this is a button ) } export default App; 파라미터로 값 받기 이벤트 버블링(event bubbling) 방지 이벤트 버블링이란? DOM 객체 이벤트가 실행될 때 하나의 DOM 객체가 내부 안에 있어 외부와 중첩되는 경우 해당 하는 기능이 두 번 실행 되는 것을 방지한다.. [React] Props와 State 차이점 Props와 State의 차이점 먼저 Props는 상위 계층의 컴포넌트와 데이터 교환을 위해 사용한다. 반면 state는 다른 컴포넌트와 상호 교환의 목적이 아닌 해당하는 컴포넌트의 외부 접근을 고려하지 않고 내부적으로 내부 클래스에서만 사용하는 것이 목적이다. 예시 소스 import React from "react"; // class 선언 class Test extends React.Component { constructor(props) { super(props) this.state = { // 문자, 숫자, 함수 다 정의할 수 있다. lang : 'javascript', date : new Date() } } render() { // render 함수 안에서 state 사용 가능 const { lan.. [React] Lifecycle Lifecycle은 리액트가 모든 요소들을 view 로 받기 때문에이 view를 데이터의 단방향을 보장하면서 효과적으로 데이터를 전체적인 틀(클래스) 내에서 단일적으로 관리하기 위한 로직을 마련하는 기능을 함 Rendering 함수를 기준으로 잡고 이전과 이후 시점으로 라이프 사이클을 실행하고 관리하는 기능들이 LifeCycle Method(라이프 사이클 메소드)다. 각각 라이프 사이클 메소드는 this.stat의 사용 가능 여부 또한 정해져 있는데 해당 예는 아래 소스 코드 및 이미지에 나와 있다. 예시 소스import React from "react";class LifeCycle extends React.Component { constructor(props) { super(prop.. [React] Rendering(조건별 Rendering) 조건별로 랜더링 하는 예시 소스 import React from 'react'; // 첫 번째 문자는 대문자 // 컴포넌트는 항상 함수를 반환해야 한다. const Loading = () => Loading... // 조건별로 랜더링 // 단일상태로 로딩 상태일 경우만 출력되는 컴포넌트 class LoadingConponent extends React.Component { constructor(props) { super(props) this.state = { // 로딩이 되기 전 loading : false } } render() { const { loading } = this.state return ( { /* 조건별 페이지 랜더링 */ loading && // Loading일 경우에만 출력 } ) }.. [React] JSX와 Fragment JSX란? React는 모든 것을 View로 본다. 그렇기 때문에 기존의 자바스크립트의 라이브러리와 프레임워크와 다르게 모든 HTML 코드를 자바스크립트 코드 안에 넣는 획기적인 방법이다. 그 기본이 되는 것이 Javascript를 확장하여 마치 XML 문법처럼 만든 것이 JSX다. JSX코드는 HTML과 매우 유사하지만 차이점이 있다. class가 아닌 ClassName으로 표기한다. 항상 camelCase 표기법으로 표기해야 한다. (기존의 onlick을 onClick으로) flagment란? JSX 요소들은 항상 한 개의 컴포넌트로 리턴이 되어야 한다. 그렇기 때문에 똑같은 head를 두 번 나열해서 쓰면 에러가 발생한다. flagment가 등장하기 전에는 div나 span태그로 묶어서 사용했다. .. [React] JSX의 개념과 React 개발을 위한 ES6+ 필수 문법(Map) JSX란? React는 모든 것을 View로 본다. 그렇기 때문에 기존의 자바스크립트의 라이브러리와 프레임워크와 다르게 모든 HTML 코드를 자바스크립트 코드 안에 넣는 획기적인 방법이다. 그 기본이 되는 것이 Javascript를 확장하여 마치 XML 문법처럼 만든 것이 JSX다. 즉 HTML 코드를 마치 XML을 코딩하는 것처럼 하는 것이다. app.js의 소스를 보면 javascript function 안에 html 코드가 코딩 되어 있는 것을 볼 수 있다. 이것을 JSX 라고한다. React는 모든 것을 Javascript로 코딩하는 것이 목적이기 때문에 JSX 문법을 통해 Javascript 안에 HTML 코딩을 하게 함으로써 모든 것을 컴포넌트화 할 수 있다. 만약 javascript 안에 H.. 이전 1 2 3 4 다음
