전체태그 보기

#리액트 (73개의 포스트)

[웹 게임을 만들며 배우는 React] ⑤ 가위바위보
chez_bono
🔗 웹 게임을 만들며 배우는 React 💡 vscode에 리액트 플러그인을 이제 설치했다..^^ 매우 편리 (ES7 React/Redux/GraphQL/React-Native snippets) 1. 리액트 라이프사이클 소개 - 클래스의 경우 - constructorrender == ref == componentDidMount ( == set...
[웹 게임을 만들며 배우는 React] ④ 반응속도체크
chez_bono
🔗 웹 게임을 만들며 배우는 React 1. React 조건문 -
[웹 게임을 만들며 배우는 React] ③ 숫자야구
chez_bono
🔗 웹 게임을 만들며 배우는 React 1. import와 require 비교 - 서로 전환 가능 image.png 🤦‍♀️ 갑자기 너무 몰아쳤다. 정리할 수도 없다... 나머지는 내일 하는 걸로...
yelloo1997

3 - 컴포넌트

3일 전0개의 댓글
책 리액트를 다루는 기술 필기 문제가 있으면 알려주세요 1. 클래스형 컴포넌트 컴포넌트의 기능, 단순한 템플릿 그 이상! - 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 준다 - 라이프사이클 API를 이용하여, 컴포넌트에 변화가 일어날 때 주어진 작업들을 처리한다 - 임의 메서드를 만들어 특별한 기능을 붙여 준다 함수형 컴포넌트와...
[웹 게임을 만들며 배우는 React] ② 끝말잇기
chez_bono
🔗 웹 게임을 만들며 배우는 React 1. React Hooks 사용하기 - 리액트는 클래스를 사용하지 않도록 권고 👉 Hooks 사용 (함수형) - state를 하나씩 분리하고 함수와 초기값 선언 - setState 대신 함수를 사용하여 state 변경 - 구조 분해 할당(Destructuring): 변수에 배열이나 객체를 선언하는 것...
kimtaeeeny
1. 상태관리에서 불변성을 유지하는 이유 1-1. 리액트, 리덕스 재랜더링 방식 1. 리액트, 리덕스는 setState, dispatch 되었을 때 재렌더링(re-rendering)이 발생함 2. 불필요한 재렌더링을 피하기 위해 shouldComponentUpdate, useCallback(react-hooks)를 씀. 3. 이 메소드는 state...
yelloo1997

2장 - JSX

5일 전0개의 댓글
책 리액트를 다루는 기술 필기 문제가 있으면 알려주세요 1. 코드 이해하기 번들러(bundler) JSX 내부에서 undefined를 렌더링하는 것은 괜찮다. 6) 인라인 스타일링 DOM 요소에 스타일을 적용할 때 - 문자가 포함되는 이름에는 -를 지우고, 카멜표기법으로 작성해야 한다. 예를들어 background-color은 ba...
yelloo1997

1장 - 리액트 시작

5일 전0개의 댓글
책 리액트를 다루는 기술 필기 문제가 있으면 알려주세요 1. 왜 리액트인가 MVC, MVVM, MVW 같은 구조는 모델(애플리케이션의 데이터 관리 영역)과 뷰(사용자에게 보이는 부분)으로 구성되는 반면, 리액트는 오직 뷰만 신경쓴다. 리액트는 데이터가 변경될 때마다 어떤 변화를 줄지 고민하는 것이 아니라, 기존 뷰를 날려버리고 처음부터 새로 렌더링 ...
gandalfzzing
오늘을 끝으로 기능구현을 완성 후에 다음 단계로 넘어갑니다. 이번에는 추가했던 Tasks를 삭제하는 기능을 구현하려고 합니다. 한시간 좀 넘게 헤맸습니다! 처음에는 filter로 해당 타켓의 value를 빼고 다시 tasks에 넣는 방식으로 진행했는데 왠지 모르게 자꾸 cant read라는 오류가 뜨는 겁니다.
hyeon930
1장 왜 리액트인가? - 템플릿과 컴포넌트 - 템플릿은 주어진 데이터 셋을 바탕으로 HTML 태그 형식을 문자열로 반환하는 것 - 컴포넌트는 해당 컴포넌트의 생김새와 작동 방식을 정의하는 것 - 초기 렌더링과 리렌더링 - 렌더링은 해당 컴포넌트의 뷰와 이벤트에 대한 정보를 가지고 있는 객체를 반환하며 컴포넌트 내부의 컴포넌트는 재귀적으로 렌더링 된다. 1...
gandalfzzing

React.TodoList(method,map);

2020년 1월 20일0개의 댓글
지난 시간에 이어 계속해서 ToDoList를 만들어 보겠습니다. 저는 이번에 input의 Value를 HTML에 출력하고자 합니다. ToDo의 경우 input value - Event 처리 - HTML에 추가 하는게 기본 골격입니다. 하지만 저는 React에서ToDoList를 만드는 것이 처음이였고 일단은JavaScript에서 하는 방식대로 해봤습니다. 하...
[웹 게임을 만들며 배우는 React] ① 구구단
chez_bono
🔗 웹 게임을 만들며 배우는 React 1. 리액트를 왜 쓰는가 - 사용자 경험 (UX) 개선 - 데이터 - 화면 일치 - 재사용 컴포넌트 2. 첫 리액트 컴포넌트 - react, react-dom 설치 필요 (🔗 링크) - 배포할 때는 development.js를 production.min.js로 대체 필요...
kimtaeeeny
1. 개요 배경화면 크롤링 사이트입니다. alpacoders라는 대형 Wallpaper 사이트를 자주 이용하는 편인데 키워드를 검색했을 때, 30개씩 정보를 보여주고 다음페이지를 클릭해서 넘어가야지만 다음 정보를 가져오는데에 불편함을 느껴 키워드를 검색했을 때 클릭하는 번거로움 없이 한눈에 이미지들을 보면 좋을 것 같다는 생각에 웹사이트를 기획해보았습니다....
gandalfzzing

React.ToDoList(props, state);

2020년 1월 17일0개의 댓글
연습예제: ToDoList 시간 Component 만들기 오늘은 리액트로 가볍게 ToDoLIST를 만들어 보면서 개념을 정리해볼까 합니다. CSS로 꾸미지는 않고, 가볍게 이론정리하는 예제로만 사용할 것입니다. React는 NomaderCoder의 그러면App Compnent에 추가된 Comppnet는 index.JS에서 DOM Reder함수에 ...
gandalfzzing
0.개요 오늘날Web 프레임워크 중 프론트앤드의 영역에서 차지하는 빅3를 보자면 react, anguler, vue가 있을 것입니다. 그 중 React를 처음 시작하고자 합니다. React의 경우 페이스북에서 만든 JS의 라이브러리로 화면단을 구성하는데 매우 유용하게 해주며, 생산성을 높여주는 녀석입니다. Jquery가 매우 무거워지기 시작했고 Angu...
kimtaeeeny
1. this JAVA 의 경우, this 는 클래스의 인스턴트의 레퍼런스 변수를 의미하지만, JAVASCRIPT 의 경우, this 는 현재 실행 문맥에서의 호출자를 의미한다. 자바스크립트 작동원리(실행 컨텍스트)...
kimtaeeeny
1. 객체지향 프로그래밍 (OOP) - 캡슐화 : 재사용 될만한 상태나 메소드들을 저장해두고 사용할 때 마다 불러올 수 있게 함.이렇게 작성한 코드들은 은닉성을 띈다. - 객체 : 이렇게 class로 캡슐화된 코드들을 필요할 때마다 복사해서 하나의 데이터(object) 로 사용. 2. 함수형 프로그래밍 (functional) - 모듈화 : 함...
React : 자식에서 부모의 state 변경
kyjun

React : 자식에서 부모의 state 변경

2020년 1월 12일0개의 댓글
리액트에서 부모컴포넌트에서 자식 컴포넌트로 props를 넘겨주는 것은 매우 쉽다. 하지만 반대로 자식에서 부모의 컴포넌트의 state를 변경해줘야 하는 일이 필요하다. 어떻게 하면 바꿀 수 있을까 ?? 바로 form 태그를 사용해서 바꿀 수 있다. 출처는 이곳이다. 이곳에 나와 있는 설명을 풀어보면 다음과 같다. Header컴포넌트를 살펴보면 ...
04_miffy

LifeCycle Method

2020년 1월 11일0개의 댓글
Reference 누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌 인프런 강의 LifeCycle 이란 LifeCycle Method 는 한국어로 "생명주기 메서드" 라고 부릅니다. 생명주기 메서드는 컴포넌트가 브라우저상에 나타나고, 업데이트되고, 사라지게 될 때 호출되는 메서드들 입니다. 추가적으로 컴포넌트에서 에러가 났을 때 호출되는...
04_miffy

Props와 State의 차이

2020년 1월 11일0개의 댓글
Reference 누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌 인프런 강의 Props, State 데이터를 다룰 때 사용되는 개념이다. Props 부모 컴포넌트가 자식 컴포넌트한테 전달하는 데이터로, (자식 입장에서)읽기 전용이다....