# Props

82개의 포스트
post-thumbnail

React_3

<Subject></Subject>언제나 똑같이 나오는 이 부분은 가치가 떨어짐..Attribute를 활용해보면 이렇게 작성할 수 있다.<Subject title = "WEB" sub="world width web!"></Subjec

3일 전
·
0개의 댓글
post-thumbnail

TIL. React - Basic 개념 정리(1)

👩🏻‍💻 면접 기출 문제를 준비하면서, React를 쓰는 이유, React가 추구하는 컨셉이 무엇인지에 대해 다시 한번 공부하고 이를 정리해보았다.

2021년 1월 14일
·
0개의 댓글
post-thumbnail

TIL31: ReactJS

Props and StateProps Drilling and Lifting State Up 자료 출처: props drilling diagram 자료 출처: lifting state up diagramLife Cycle Method

2021년 1월 14일
·
0개의 댓글
post-thumbnail

📗[React 주요 개념] 1. 컴포넌트, props

자주 사용되지는 않는다고는 함.javascript함수 작성ES6 class이곳부터.. state와 생명주기

2021년 1월 9일
·
0개의 댓글

TIL // 2020.12.30

Props와 State가 너무 헷갈려서 복습부모 컴포넌트가 자식에게 주는 값App.js(부모) -> MyName.js(자식) 값 전달 예시App.jsMyName.js데이터 전달받지 못했을 때에 디폴트값을 설정해주는 방법단순히 데이터를 전달받아서 렌더링만 하는 경우엔 함

2020년 12월 30일
·
0개의 댓글
post-thumbnail

[말로 풀어쓴 React] props(properties), children

props가 없을 때props(properties)를 사용할 때 children를 사용할 때props, children 정리 App.js, First.js, Second.js 모두 src 폴더 안에 있으면 실행됩니다. (create-react-app)하면 생기는 디렉

2020년 12월 29일
·
0개의 댓글

동적 라우팅 세션

react 자체는 router 기능이 없기에, 우리는 라우팅 기능을 사용할 때는third-party-library인 react-router-dom을 끌어다가 쓴다. react-router-dom 은 다음과 같은 3가지 값을 props 로 제공한다.historylocat

2020년 12월 20일
·
0개의 댓글
post-thumbnail

React Main page 만들기

React로 기존에 만들었던 자바스크립트를 새롭게 만들면서 정말 React의 편리함을 사뭇 깨닫게 되었다. 특히 map함수를 활용하고 mockdata나 config파일을 만들어 코드를 간단하게 만들어 깔끔해짐을 볼때마다 느끼는 뿌듯함... 그래 이맛이야...

2020년 12월 12일
·
0개의 댓글
post-thumbnail

TIL-wecode 22일차

🙈React는 Component로 구성된다. component는 한글 해석한 것과 같이 구성요소를 의미한다.이러한 컴퍼넌트는 페이지를 구성하고 여러단위로 쪼개면 component안에 component가 생기므로 부모-자식 구조의 관계가 생성된다.👍컴퍼넌트의 상태👍

2020년 12월 8일
·
1개의 댓글
post-thumbnail

TIL-wecode 20일차

LifeCycle API를 사용할때는 언제일까?컴퍼넌트가 우리 브라우져에 나타날때, 업데이트 될 때, 사라질때 우리는 LifeCycle API를 사용합니다.LifeCycle API 사진을 보며 이해해보자출처:http://projects.wojtekmaj.pl/

2020년 12월 5일
·
0개의 댓글
post-thumbnail

[React] props와 state 이해하기

props 와 state > property의 줄임말로, 상위 컴포넌트가 하위 컴포넌트에게 주는 값이다. 하위 컴포넌트에서는 porps를 상위 컴포넌트로부터 받아오기만하고 받아온 props를 직접 수정할수는 없다. 받아온 props값은 this.로 접근할 수 있다.

2020년 12월 1일
·
0개의 댓글
post-thumbnail

[React] Component 생성하기 (feat.props)

이번에는 props라는 개념을 사용하여 더 생산적인 Component를 만들어 보자. React는 정의해준 컴포넌트로 작성한 요소를 발견하면 JSX의 속성과 속성값을 해당 컴포넌트에 단일 객체로 전달하는데, 이 객체를 props라고 한다. 기존 삽입해 두었던 Subje

2020년 11월 28일
·
0개의 댓글
post-thumbnail

[React] 4. Component와 Props

UI를 재사용이 가능하게 하는 여러 조각으로 개념적으로는 JavaScript 함수와 유사하다.리액트 엘리먼트는 사용자 정의 컴포넌트로도 나타 낼 수 있다.리액트가 사용자 정의 컴포넌트로 작성한 엘리먼트(Welcome)를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트

2020년 11월 24일
·
0개의 댓글

리액트 네이티브 state 와 props 이해하기

우선 기본 화면인 App.js 파일의 App class에 아래와 같이 작성하였다.말이 어려운거 같지만, 쉽게 얘기하자면, 앱을 실행시킬때 출력되는 화면을 나타내는 데이터들을 다룬다는 말이다. state는 그만큼 중요하다. 위의 코드와 같이 render함수 밖에 stat

2020년 11월 14일
·
1개의 댓글
post-thumbnail

리액트 처음부터 다시하기.6

여기 아주 기본적인 이벤트가 하나 있다. 아주 기본적이면서 우리가 웹에서 스크롤 다음으로 많이 하는 클릭 이벤트다.작성 할 때에는 이벤트종류 = 실행 할 함수 를 써주게 된다. 위의 함수는위 사진의 WEB 이라는 글자로 된 링크를 '클릭' 하면 경고창을 띄우는 함수다.

2020년 11월 13일
·
0개의 댓글
post-thumbnail

리액트 처음부터 다시하기.2

컴포넌트는 재사용 할 수 있다는 엄청난 장점을 가지고 있다. 하지만 컴포넌트를 컴포넌트 자체로 재사용하게 되면 그 컴포넌트 자체의 내용을 수정하지 않는 한 재사용 할 때마다 똑같은 내용만을 보여주게 된다.위 사진처럼 App 컴포넌트에서 Suject 컴포넌트를 불러오는데

2020년 11월 12일
·
0개의 댓글
post-thumbnail

Props 응용

✔ 제목버튼을 눌렀을때 각각 다른 모달창 제목나타내기✔ 버튼말고 <h3>에 직접 사용해보기◾ 버튼 3개 만든다.◾ 각각 버튼을 누르면 글제목이 수정되어야하므로 Modal라는 컴포넌트안에 제목부분을 props로설정◾ 누른제목이 변수가 0이면 0번째 제목이 나타

2020년 11월 12일
·
0개의 댓글
post-thumbnail

Props

✔ props 사용하는 이유와 방법✔ 모달창 props 기능추가해보기✔ state 데이터 변경하는 방법◾ 부모 컴포넌트 -> App◾ 자식 컴포넌트 -> Modal◾ 이때, Mdoal이라는 자식컴포넌트가 부모인 App이 가진 state를 사용하고싶다면 props

2020년 11월 12일
·
0개의 댓글
post-thumbnail

Map

✔ map함수를 이용해 반복된 HTML코드 간단히 만들기✔ 일반 for 반복문을 쓰고싶다면?✔ props 기능과 원리◾ map함수는 원본 자료형을 변형시키지 않아서 새로운 변수에 담아서 사용한다◾ 위처럼 작성하면 newArray에는 10, 20, 30이 담겨져

2020년 11월 12일
·
0개의 댓글