본문 바로가기

dev151

[React] 이벤트 1. 이벤트 리스닝하기와 반응하기 - 카운터 예제로 한번 알아보자 - 노란색 화면에 count 숫자와 버튼 하나가 생성된것을 확인할 수 있다. 지금은 + 버튼을 누르더래도 아직 아무 변화가 생기지 않는다. 2. 버튼 작동시키기 - 버튼을 눌렀을때 count를 1씩 증가 시켜야 한다. 1) 버튼 클릭 이벤트를 리스닝 한다 2) 클릭에 반응해 카운더가 의존하는 this.state.count 속성의 값을 증가시킬 이벤트 헨들러를 구현한다. - onClick 을 눌렀을때 increase 함수를 호출하라는 의미이다 - increase 함수 즉 이벤트 핸들러를 구현해 보자 1) increase 함수를 정의한 후 2) increase 함수에 대해서 constructor에서 바인딩 해준다 == 카운터 최종코드 == 3.. 2022. 11. 30.
[React] 데이터에서 UI로 1. 예제를 통해서 알아보도록 하자 -- 지금까지 Circle 컴포넌트 하나를 선언했고, bgColor 속성을 이용해 원의 컬러를 설정했다. 그러나 render 메서드에서 Circle 컴포넌트를 사용하는 일에는 약간의 제약이 따른다. Circle 컴포넌트의 동작에 영향을 주는 데이터를 다루는 경우에는 특히 그렇다 지금 부터는 이문제를 해결하기 위한 방법을 살펴볼 것이다. 2. 어디서든 가능한 JSX - 2 - JSX가 render 함수의 외부에 존재하면서 변수나 속성값으로 사용되는 경우로 봤다. theCircle 변수에는 Circle 컴포넌트를 인스턴스화 하기 위한 JSX가 담긴다. 이 코드의 경우에는 Circle 컴포넌트의 인스터스화가 render 메소드에서 벋어남으로써 좀더 여러가지 일을 할 수 있게.. 2022. 11. 30.
[React] 상태 다루기 - 지금까지의 컴포넌트는 무상태 컴포넌트 였다. 부모로 부터 받은 속성은 있으나, 실행될 때 그 속성에 관한 어떤 변화도 일으키지 않았다. - 하지만 사용자와의 상호작용 결과로 컴포넌트의 어떤 부분은 변경되거나, 서버로부터 데이터를 가지고 오거나, 그밖에 무수히 많은 일들이 일어날수 있다. 즉 .. 우리에게 필요한것은 >> 속성의 수준을 넘어 컴포넌트에 데이터를 저장하는 또 다른 방법이다. >. 이는 변경되는 데이터를 저장해야 한다는 의미이다. 그 데이터를 바로 상태(state) 라고 한다. 1. 상태 사용하기 -- 간단한 앱을 만들어 실습해보도록 하자 (번개친 횟숫 카운트하기) >> LightningCounterDisplay 라는 컴포넌트는 render() 에서 스타일 객체를 만들어 태그에 스타일을 지.. 2022. 11. 30.
[REACT] JSX 특징 1. 표현식 평가 >> JSX는 자바스크립트처럼 취급된다. 즉 동적인 콘텐츠도 다룬다는 말이다. >> 리턴되는 값을 동적으로 생성되게 하려면 { } 중괄호로 감싸주는게 전부이다. >> 중괄호는 표현식 먼저 평가돼그 결과를 리턴하게 만든다. 2. 복수의 엘리먼트 리턴 >> 여태 다른 엘리먼트를 자식으로 두는 상위 엘리먼트 하나만을 리턴한것을 볼수 있는데 복수의 엘리먼트를 리턴할 수 있으며 방법으로는 1) 배열 같은 식의 문법을 사용한다. - 단일한 부모 엘리먼트 없이 p태그 세 개를 리턴하고 있다. - 또한 복수의 아이템을 리턴할 때 다룰수도 있는 사항이 있는데 바로 각 아이템에 key 속성과 고유 값을 지정하는 것. 2) 리액트 v16.2.0부터 추가된 프래그먼트 라는 패턴이 개입된다. - 리턴하고 싶은.. 2022. 11. 30.
[DB/ORACLE] 계층쿼리 -- 계층 쿼리 -- 계층 쿼리를 사용하면 순환 관계를 가진 데이터를 조회 할 수 있다. -- 순환 관계를 가진 데이터는 계층 구조로 표현할 수 있다. -- 부모 노드 : 현재 노드의 직전 상위 노드 -- 자식 노드 : 현재 노드의 직후 하위 노드 -- * 하나의 자식 노드는 하나의 부모 노드만 가질 수 있다. -- 노드는 부모노드와 자식노드의 존재 여부에 따라 -- 루트노드, 브랜치 노드, 리프노드 등으로 구분 된다 -- 루트노드 : 부모 노드가 존재하지 않는 노드 -- 브랜치 노드 : 부모 노드와 자식 노드가 존재하는 노드 -- 리프 노드 : 자식 노드가 존재하지 않는 노드 -- 순환 관계는 깊이에 따라 레벨이 부여 된다. 루트 노드의 레벨은 1이고, 계층이 전재 될수록 레벨이 1씩 증가한다. -- .. 2022. 11. 30.
[React] 속성 전달 >> 리액트는 반드시 부모 컴포넌트에서 직계 자식 컴포넌트로만 속성이 내려가게 하는 연쇄적인 명령 실행만 가능하다. 속성을 전달할 때 중간 계층을 건너 뛸 수 없다는 의미이며, 또한 자식으로부터 부모로 속성을 거꾸로 올려보낼수 없다. 속성은 1개씩 타고 내려가며, root로 부터 color = "red" 가 들어가게 되면 한칸 단계씩 옴겨져야 한다 color = {this.props.color} ~~ 만약 보내야 속성이 1개가 아닌 n개 가 된다면 어떻게 될까? 예제를 통해서 알아보자 ReactDOM.render() 에서 정의된 값이 각 컴포넌트들에게 전달되어 마지막에 있는 곳에서 Display 컴포넌트에서 값을 표시하였다. 즉 목적지를 향하는 경로에 있는 모든 컴포넌트들이 각 속성에 접근하고 재정의해 .. 2022. 11. 29.
[React] 복잡한 컴포넌트 제작 아무리 복잡한 사용자 인터페이스래도 단순하고, 이해하기 쉽게 만들수 있는 체계적인 방법이 있다. >> 1. 주요 비주얼 요소의 식별 >> 쪼개기 2. 컴포넌트로 만들 대상의 선별 >> 식별한 비주얼 요소 중에 어떤 것을 컴포넌트로 만들지 따져봐야 한다. 모든 비주얼 요소를 컴포넌트로 만들 필요는 없으며, 반대로 극도로 복잡한 몇개의 컴포넌트만 만드는것도 좋지 않다. >> 하나의 컴포넌트는 하나의 역할만 해야 한다. 3. 총 3개의 컴포넌트로 나눴다. 전체의 큰 Frame역할인 Card, 색상을 보여주는 Square, 글씨를 보여주는 Label 이제 하나씩 채워 가보도록 하자 1. 프레임 역할을 하는 Card를 채워보자 >> cardStyle 객체를 생성하여 div 에 Style적용을 시켜주었다. 다음으로.. 2022. 11. 29.
[React] 리액트 스타일링 위와 같이 div div div 엘리먼트에 스타일을 적용하게 되면 다른 div div div 에도 적용이 된다 따라서 리액트가 생성하는 HTML을 좀더 쉽게 스타일링 할수 있는 방법을 사용해 보도록 하자 1. 안쪽 div 엘리먼트에 letter라는 값의 class 속성을 갖게 하자 >> 여기서 보면 class 가 아닌 className을 사용한것을 주의 깊게 보자 2. div div div 에 줬던 CSS 셀렉터를 .letter로 변경하자 ** 리액트 방식의 스타일링 - 리액트는 CSS를 사용하지 않는 인라인 방식의 스타일링을 선호한다. - 컴포넌트 안에 스타일을 지정하는 방법은 CSS 속성과 값을 콘텐츠로 갖는 객체를 정의 하는 것이다. 1. 스타일 객체 만들기 2. 만든 객체를 스타일링 하고자 하는 .. 2022. 11. 29.
[React] React Component ReactComponent 를 사용 하기 위한 방법중 Class를 사용하는 방식으로 기본 틀을 보여준다 Class에서의 render는 ReactDOM.render() 에서와 동일하게 JSX를 처리할수 있는 책임이 있다. render(){}에서 Hello, componentized world! 를 리턴하도록 나타내어 주고 있다. 이제이 컴포넌트를 사용하려면 호출만 해주면 된다. ReactDOM.render() 메서드를 통해서 호출하는 방법이 특이한데, 클래스를 태그 안에 감싸 주면된다. ================================================================ Hello, componentized world! 에서 componentized world 부분을 인자로 .. 2022. 11. 29.
[React] 리액트의 기본형 리액트를 사용하기 위해서 react, react-dom, babel을 import 해줘야 한다. 기본적인 리액트 기본 틀은 다음과 같다. 리액트에서 화면에 출력해주기 위해서는 ReactDOM.render( 1, 2) 메서드를 사용하게 된다. 매개변수 1. 화면에 출력하고 싶은 html(jsx) 2. 해당 jsx를 렌더링 해 보여줄 DOM의 위치 보여주고자 하는 html 은 SangNamja 태그이며, 보여줄 위치는 ID=CONTAINER인 태그이다. 2022. 11. 29.

티스토리툴바