일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- error
- Eclipse Compare View
- html
- 정적웹사이트
- Adobe
- Study
- TaskRunner
- next.js
- VW
- Sass
- npm
- 이클립스 소스 비교 안보일 때
- tomcat
- SSR
- CSS3
- 1분코딩
- Eclipse Bug
- css
- React
- JavaScript
- Eclipse
- 보일러플레이트
- java
- frontend
- ref
- animation
- 자바스크립트
- 이클립스
- gulp
- ref전달하기
- Today
- Total
목록React (14)
프론트 개발 블로그
아래와 같은 코드를 작성할 때 Warning: Each child in a list should have a unique "key" prop. 이와 같은 에러 문구가 발생된다. 리스트의 원소마다 유니크한 'key' prop를 가져야 된다는 말이다. 리액트의 원소는 유일해야 되는데 원소가 리스트에 포함되면서 유일성이 없어졌기 때문이다. 불러오는 데이터에 id를 추가해 각각 원소마다 유니크한 값을 주고 key props를 불러오면 에러문구는 사라진다. 리액트는 컴포넌트가 서로 다르다는 것을 알 수 없기 때문에 이렇게 각각의 유니크한 key props 값을 주어야 한다. const foodILike = [ { name: 'banana', number: 1, image: 'https://www.google.co..
Props란? React가 컴포넌트를 발견하면 JSX 어트리뷰트를 해당 컴포넌트에 단일 객체로 전달한다. 이 객체를 props 라고 한다. props 란? attribute 와 properties 차이 props로 name, color 값 가져오기 props 값을 구조분해할당으로 가져오기 defaultProps children 조건부렌더링 props란? React가 컴포넌트를 발견하면 JSX 어트리뷰트를 해당 컴포넌트에 단일 객체로 전달한다. 이 객체를 props(property)라고 한다. * props는 객체의 형태로 parameter 를 가져온다. attribute 와 propertices 의 차이 Attribute는 HTML문서에서 elements에 추가적인 정보를 넣을 때는 요소이고, Prope..
JSX란? 자바스크립트 확장 문법으로 React 컴포넌트의 생김새를 정의합니다. JSX란? JSX 기본규칙 1. JSX에 표현식 포함하기 2. 두 개 이상 태그는 하나의 태그로 감싸기 self closing tag Fragment 사용방법 3. Style 설정 방법 4. Class 설정 방법 5. JSX 주석처리 6. return();은 가독성을 위해서 사용한다. 7. 컴포넌트는 네이밍은 항상 대문자로 JSX란? 자바스크립트 확장 문법으로 React 컴포넌트의 생김새를 정의한다. Bebel은 JSX문법을 React.createElement()로 호출한다. JSX문법이 자바스크립트로 변환되는 것을 확인할 수 있다. JSX 기본규칙 1. JSX에 표현식 포함하기 JSX를 if, for loop 안에 사용하고..
Facebook 이 만든 자바스크립트 라이브러리로, 사용자 인터페이스를 만들 때 사용한다. 왜? React인가? React 작업환경 구성 React 테스트 환경 구성 중 [Yarn start not found] 에러 발생 VSCode 터미널 권한 정책 문제 왜? React인가? 기존에는 Javascript를 사용하여 DOM을 변형하는 방식으로 사용자 인터페이스를 구현했다. 허나 이렇게 DOM을 직접적으로 건드리면 코드가 복잡해진다. 그래서 Ember, Backbone, AngularJS의 경우엔 자바스크립트의 특정 값이 바뀌면 특정 DOM의 값이 변경되어 업데이트하는 방법으로 간소화시켰다. React의 경우에는 상태가 바뀌었을 때 모든 것을 새로 만들어서 보여준다. 가상의 DOM(Virtual DOM)을..