본문 바로가기

전체 글

[React] 리스트(List)와 키(Key) 1. 개념 1) 리스트(List) - 같은 아이템을 순서대로 모아놓은 것 - 리스트를 위해 사용하는 도구인 자료구조는 배열(Array), 배열은 자바스크립트의 변수나 객체를 하나의 변수로 묶어놓은 것 const numbers = [1, 2, 3, 4, 5]; 2) 키(Key) - 각 객체나 아이템을 구분할 수 있는 고유한 값 리액트에서는 배열과 키를 사용하여 반복되는 다수의 엘리먼트를 쉽게 렌더링할 수 있음 2. 여러개의 컴포넌트 렌더링하기 - 자바 스크립트 배열의 map() 함수 사용 - 배열에 들어있는 각 변수에 어떤 처리를 한 뒤 결과(엘리먼트)를 배열로 만들어서 리턴하는 것 - map()함수 안에 있는 엘리먼트는 꼭 키가 필요함 mport React from 'react'; function Num.. 더보기
[React] 조건부 렌더링(Conditional Rendering) 1. 조건부 렌더링(Conditional Rendering) 1) 개념 - 조건에 따라 렌더링의 결과가 달라지도록 하는 것 function Greeting(props) { const isLoggedIn = props.isLoggedIn; if(isLoggedIn) { return ; } return ; } -> props로 들어오는 isLoggedIn에 값(조건)에 따라서 화면에 출력하는 결과가 달라지게 됨 2) 엘리먼트 변수(Element Variables) - 리액트 엘리먼트를 변수처럼 저장해서 사용하는 방법 function LoginControl(props) { //useState()훅을 사용해서 사용자의 로그인 여부를 자체적으로 관리 const[isLoggedIn, setIsLoggedIn] = .. 더보기
[React] 이벤트 핸들링(Event Handling) 1. 이벤트 처리 - 컴퓨터 프로그래밍에서 이벤트는 사건이라는 의미를 가짐 1) DOM 이벤트 vs 리액트 이벤트 // DOM의 이벤트 처리 Activate - 이벤트의 이름(ex. onclick)을 소문자로 표기 - 이벤트를 처리할 함수를 문자열로 전달 // 리액트에서 이벤트 처리 Activate - 이벤트 이름을 카멜표기법으로 표기 - 이벤트를 처리할 함수 그대로 전달 2) 이벤트 핸들러(Event Handler) - 어떤 이벤트가 발생했을 때 해당 이벤트를 처리하는 함수 - 이벤트 리스너(Event Listener)라고도 함(이벤트가 발생하는 것을 계속 듣고 있다는 의미) - 클래스 컴포넌트: 클래스의 함수로 정의하고 생성자에서 바인딩하여 사용, 클래스 필드 문법도 사용 가능 - 함수 컴포넌트: .. 더보기
[React] 훅(Hook) 1. 훅(Hook) 기존 함수 컴포넌트는 클래스 컴포넌트와는 다르게 코드가 간결하고 별도로 state를 정의해서 사용하거나 컴포넌트의 생명주기에 맞춰 어떤 코드가 실행되도록 할 수 없었는데 함수 컴포넌트에 이런 기능을 지원하기 위해 나온 것이 훅 -> 훅을 사용하면 함수 컴포넌트도 클래스 컴포넌트의 기능을 모두 동일하게 구현할 수 있음 리액트의 훅: 리액트의 state와 생명주기 기능에 갈고리를 걸어 원하는 시점에 정해진 함수를 실행되도록 만든 것으로 이때 실행되는 함수를 훅이라고 부름 훅의 이름은 모두 use로 시작되며, 커스텀 훅을 만들어서 사용할 수도 있는데 훅의 규칙에 따라 이름 앞에 use를 붙여서 훅이라는 것을 나타내야함 2. 자주 쓰이는 훅(hook) 종류 1) useState [React].. 더보기
[React] State와 생명주기(LifeCycle) 1. State 1) 개념 - 리액트에서의 state는 리액트 컴포넌트의 상태(컴포넌트의 데이터)를 의미 -> 리액트 컴포넌트의 변경 가능한 데이터 - 리액트 컴포넌트는 개발자가 직접 정의해서 사용하게 됨 - 렌더링이나 데이터 흐름에 사용되는 값만 state의 포함시켜야 함 -> state가 변경될 경우 컴포넌트가 재렌더링 되기 때문에 성능저하에 문제가 있을 수 있음, 그렇지 않은 값은 컴포넌트 인스턴스의 필드로 정의 2) 특징 - state는 자바스크립트 객체 class LikeButton extends React.Component { // 클래스 컴포넌트의 경우 state를 생성자에서 정의(cf. 함수컴포넌트는 state를 usestate()라는훅을 사용해서 정의) // constructor() 함수.. 더보기
[React] 컴포넌트(Component) 1. 컴포넌트(Component) - 개념적으로 자바스크립트 함수와 비슷함, 입력을 받고 정해진 출력을 내뱉음 - Props를 입력받고 리액트 엘리먼트가 출력됨 => 어떠한 속성들을 입력받아 그에 맞는 리액트 엘리먼트를 생성하여 리턴해주는 것 1) 컴포넌트의 종류 - 클래스 컴포넌트: 리액트 초기 버전에서 주로 사용 - 함수 컴포넌트: 클래스 컴포넌트가 사용하기 불편하여 함수 컴포넌트를 개선하여 주로 사용하게 됨 (cf. 함수 컴포넌트를 개선하는 과정에서 개발된 것이 훅Hook) 2) 컴포넌트 만들기 좋은 것들 - 반복적인 html 축약할 때 - 큰 페이지들 - 자주 변경되는 것들 3) 컴포넌트의 단점 다른 function에 정의된 state를 가져다 쓸 때 문제 생김(정의되지 않았으니까) 2. 컴포넌트.. 더보기
[React] 리액트 엘리먼트(element) 렌더링 1. 엘리먼트(Element) 1) 정의 - Element: 요소, 성분이라는 뜻으로 어떤 물체를 구성하는 성분 - DOM 엘리먼트와 리액트 엘리먼트 비교 DOM 엘리먼트 리액트 엘리먼트 - 웹 사이트에 대한 모든 정보를 담고 있는 객체인 DOM(Document Object Model)에서 사용하는 용어로 HTML요소를 나타냄 - 실제로 화면에서 볼 수 있는 HTML 요소 - 리액트 엘리먼트에 비해서 많은 정보를 담고 있어서 상대적으로 크고 무거움 - 리액트 앱을 구성하는 가장 작은 블록요소 - 화면에 나타나는 내용을 기술한 자바스크립트 객체로 DOM 엘리먼트 형태 - DOM 엘리먼트의 가상표현: 리액트 엘리먼트가 기술한 내용을 토대로 실제 화면에서 보게되는 DOM 엘리먼트가 만들어짐 2) 생김새 리액트.. 더보기
[React] JSX(JavaScript and XML) 1. JSX(JavaScript and XML) - 자바스크립트와 XML/HTML을 함께 사용할 수 있는 자바스크립트의 확장 문법 // HTML의 태그를 사용한 Hello, world!라는 문자열을 값으로 가지고있는 것을 const형의 element 변수에 대입 const element = Hello, world!; - 내부적으로 XML/HTML 코드를 자바스크립트로 변환하는 과정을 거침 - 리액트의 createElement() 함수는 JSX코드를 자바스크립트 코드로 변환해주는 역할을 함 -> JSX코드를 작성해도 최종적으로 자바스크립트 코드가 나옴 2. JSX의 역할 1) JSX로 작성된 코드는 모두 자바스크립트 코드로 변환 JSX로 작성한 코드와 순수 자바스크립트로 작성한 코드 비교 - JSX로 작성.. 더보기

티스토리툴바