JavaScript (40) 썸네일형 리스트형 컴포넌트 활용하기(state) state state 는 리액트 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다 props는 이전 포스팅에서 자세히 다루어 봤는데, 이는 사용되는 과정에서 부모 컴포넌트에서 설정하는 값이 지정이 되며 컴포넌트 자신은 props를 읽기 전용으로만 사용할 수 있습니다. 즉 props를 바꾸려면 부모 컴포넌트에서 바꾸어주어야 합니다. 하지만 state는 컴포넌트 내부에서 직접 값을 변경하는 것이 가능합니다. state의 종류로는 클래스형 컴포넌트의 state와 함수형 컴포넌트의 useState() 라는 함수가 있습니다 예제를 통해 이 두 가지에 대해 알아보겠습니다. 클래스형 컴포넌트의 state import React, { Component } from 'react'; import PropTypes from .. 컴포넌트 활용하기(props) 모듈 생성 및 import/export 먼저 컴포넌트를 생성해 이를 내보내고(export), 불러오는(import) 작업을 수행해 보겠습니다. 저는 일단 기본 리액트 프로젝트 src 폴더에 > MyComponent라는 폴더를 생성했습니다 그리고 그 내부 동일 명칭의 js 파일을 생성해보았습니다. const style = { color : 'red', } const MyComponent = () => { return new component } export default MyComponent; 해당 JS 의 내용은 위와 같은데 위 내용에서는 가장 아래 줄 export default MyComponent를 유의깊게 확인해 보아야 합니다. 이 코든는 해당 파일을 다른 코드에서 import 할 때 MyCompo.. 컴포넌트 컴포넌트? 컴포넌트라는 용어는 독립적인 기능을 수행하는 단위 모듈을 의미합니다. 리액트를 사용하는 개발자들에게 있어 애플리케이션을 설계할 때 사용자가 볼 수 있는 여러가지 컴포넌트들을 제공하는데 , 이는 애플리케이션 개발에서 재사용성을 높이고 유지보수를 용이하게 하기 위한 기술입니다. 함수형/클래스형 컴포넌트 컴포넌트를 선언하는 방식은 두가지로 나누어지 집니다. 하나는 함수형 컴포넌트, 하나는 클래스형 컴포넌트 입니다. 이전 포스팅에서 다루었던 내용중 코드 하나를 인용하자면 function App() { const v_react = "React"; return ( {v_react} Test ); } 바로 위와 같은 App 함수 같은 경우가 함수형 컴포넌트 입니다 두번째로는 클래스형 컴포넌트가 있는데 위 .. JSX JSX란 리액트 프로젝트 생성과 node/npm 설치 과정은 생략하겠습니다. JSX는 자바스크립트의 확장 문법이며 XML 과 굉장히 유사합니다. 먼저 JSX 코드 순서부터 확인해 보면 import logo from './logo.svg'; /*import 특저 파일을 불러 오는 것을 의미*/ import './App.css'; function App() { return ( React Test ); } export default App; 이렇게 생긴 JSX 형태를 띄고 있습니다. 이러한 코드는 실제로는 다음과 같이 변화 되어 사용 됩니다 function App(){ return React.createElement("div", null, ' React Test'); } 만약 새로 렌더링을 할 때마다 위 코드.. React JS란 React JS의 인기 프론트앤드 개발자라면 아니, 모든 웹 개발 관련 종사자들은 최근 자바스크립트에 대한 열광과 React JS, Vue, Angular에 대한 뜨거운 관심에 대해 알고 있을 것입니다. 자바스크립트는 단순한 스크립트 언어에 불과했으나 현재는 웹 애플리케이션에서 가장 핵심적인 역할을 수행하며, 이에대한 자세한 내용은 https://dkkim2318.tistory.com/64?category=915842 자바 스크립트 자바 스크립트? 자바스크립트를 한마디로 정의하자면 브라우저 내에서 동작하는 언어라고 할 수 있습니다. 웹 개발자들에게는 브라우저에서 동작하는 언어기 때문에 완벽하게는 아니여도 필 dkkim2318.tistory.com 해당 포스트를 통해 확인 할 수 있습니다. 이러한 자바스크.. Template 리터럴 Template 리터럴은 문자열 처리를 위한 템플릿을 제공합니다. Template 리터럴은 역따옴표(` `) 안에 문자열과 표현식을 작성할 수 있습니다 예를 들어 `안녕하세요${표현식}` 과 같이 되어 있다면 해당 코드는 자바스크립트 내에서 => 안녕하세요 (문자로 인식) + ${표현식}은 표현식의 결과를 문자열로 출력이 됩니다. 따라서 표현식에 따라 출력되는 결과가 다르며 문자열과 표현식의 결과를 묶어 하나의 문자열로 표현하는 방식이 바로 Template 리터럴 입니다. Template 리터럴 기본 예제 console.log("1:", `1234ABC가나다라`); // expression 조합이 없기 때문에 template literal 이라고 볼 수는 없음 console.log("2:", `라인1 \.. Spread 연산자 spread 연산자 이터러블 오브젝트의 엘리먼트를 하나씩 분리하여 전개할 수 있습니다. spread 연산자로 인해 분리된 엘리먼트들은 어떤 변수에 할당한다거나, 호출하는 함수의 파라미터 값으로 사용하는 여러가지 응용이 가능합니다. Spread 연산자 문법 spread 연산자는 기본적으 '...' 점 3개를 연속으로 붙인 기호를 사용합니다. 점 3개에 이어서 이터르블 오브젝트를 작성하면 spread 연산자를 통해 엘리먼트를 전개할 수 있습니다. let arrOne = [11,12]; let arrTwo = [21,22]; let spreadObj1 = [...arrOne, ...arrTwo, 31,32]; console.log(spreadObj1); console.log(spreadObj1.length);.. 동기/비동기 ,callback 함수 콜백(callback)함수는 간단히 말하자면 다른 함수가 실행을 끝낸 뒤 실행하는 함수를 의미합니다. 조금더 자세히 말하자면 함수가 다른 함수의 인자가 되어 타 함수 내에서 수행되어지는 것을 말합니다. 함수를 인자로 던진다는 것은 한 함수 내에서 다른 함수를 사용한다를 의미하는데, 그렇다면 외부함수를 정의하고 호출해 쓰는 것과 어떤 차이가 있지? 라는 의문이 들 수 있습니다. 이런 의문을 해소하기 위해선 먼저 동기 / 비동기 방식에 대한 이해가 있어야 합니다. 동기식 동기식은 우리가 기본적으로 익숙한 방식입니다. 동기식은 프로그래밍을 했을 떄 위에서 아래로 절차적으로 수행합니다 함수를 호출한다면 호출한 함수 블럭을 모두 수행한뒤 그 다음 해야할 일을 진행하는 방식이죠, let a = 3; let b = .. 이전 1 2 3 4 5 다음
