도전!개발자 일기

벌써 두달이지났나 처음 state끌어올리기를 보고 멘붕이었고..그렇게 2차시험까지 반이상을 못풀고 제출하고 ㅠㅠ 이놈의 상태끌어올리기 계속 복습하던중에 이제야 된다..이제야 잊어버리기전에 적어두고 계속 반복해야지.. 예제 예제 앱은 부모와 자식 컴포넌트가 하나씩 존재하는 트리 구조입니다. 그리고, 상태를 변경시킬 수 있는 메소드가 존재한다고 생각해보세요. 다음과 같은 구성을 가지게 될 것입니다. //문제 import React, { useState } from "react"; export default function ParentComponent() { const [value, setValue] = useState("날 바꿔줘!"); const handleChangeValue = () => { setVa..

React 2021. 12. 16. 17:44

이제 리액트를 좀더 역동적으로 만들기위해 이벤트를 배울건데 이벤트는 props, state, event 세가지가 합쳐져있는 거.. 허허.. *생활코딩 참고 *작성자는 가상머신 우분투를 이용해 수업중 목표 맨 위에 WEB 클릭시, 웰컴 본문 출력. 아래 세리스트 클릭시, 그에 맞는 컨텐츠 출력. 1. Subject.js의 WEB부분에 링크걸기 2. App.js에 현재 페이지가 웰컴페이지인지, read페이지인지 표시하기위해 mode 사용 웰컴모드일때 타이틀, 설명추가 리액트에서는 props나 state의 값이 바뀌면 화면이 다시그려진다. > render함수가 호출되기때문 그래서 mode에 따라 만들어지는 결과가 다르게 만든다. 그렇기에 render함수가 실행될때 mode가 웰컴이면 ~~~을, read면 ~~..

React 2021. 11. 3. 11:29

인강안보고 이해하려니 역시안되겠다... 생활코딩 리액트 15강 State props시간에 작성했던 하드코딩부분은 state를 이용해 변경하려한다. 컴포넌트 제일윗부분에 constructor/ super를 사용하면 컴포넌트를 초기화 할 수 있다. 설명자체가 어려워서ㅠㅠ(물론나에겐) 영상을 끊어가면서,.받아적는중 초기화 후에 this.state로 state값을 초기화 시킨다. 이값을 어떻게 사용하냐면 아래 리턴부분을 변경 외부에서 알필요가없는 정보를 철저하게 숨기는것이 사용하는 이유! 상의컴포넌트의 state값을 하위컴포넌트에서 변경하고 싶을때 사용한다. 늠나..어렵네 여러개의 값을 다룰때 = key TOC의 목록이 추가될때마다 자동으로 생성되게 하고싶다면 ? 반복문을 이용해보자. result라는 빈배열을 ..

React 2021. 11. 3. 09:30

생활코딩을 참고하여 작성// 컴포넌트 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 말한다. 더 쉽게말하자면 하나의 기능을 하는 부분부분으로 떼어서 이동하거나 재사용이 가능하다. 컴포넌트 만드는법 먼저 html로 이렇게 간단한 헤더가 있을때 이것을 컴포넌트로 만드려한다. WEB world wide web! class를 이용해 만들기 (함수형은 나중에 포스팅하겠음) class 이름 extends Component 작성 이름을 지어준다 (JSX문법에따라 첫글자는 대문자 - Subject라고 지었음) reder() / return {} (랜더는 원래 함수인데 클래스안에쓸때는 function을 생략한다.) class Subject extends Component { render (){ return { ..

React 2021. 11. 2. 12:15

이부분이 내가 생각하는 리액트에서 가장 어려운 부분. 이부분을 몇번째보고있는데 이해가안가서 막힌다. State 컴포넌트 내부에서 변할 수 있는 값 Props 외부에서 받은 값 좀더 잘 이해하기위해 사람을 예시로 들면 사람의 이름, 성별, 나이, 현재 사는 곳, 취업여부, 결혼/연애여부는 어디에 해당될까? State - 현재 사는 곳, 취업여부, 결혼/연애여부 Props - 사람의 이름, 성별 더 자세히 알아보자면, Props 특징 컴포넌트의 속성을 의미한다.(변하지 않는 외부로부터 전달받은 값) 부모 컴포넌트로부터 전달받은 값 객체 형태 읽기 전용(read-only) 사용하는법 1. 하위 컴포넌트에 전달하려는 값과 속성을 정의한다. 2. props를 이용하여 정의된 값과 속성을 전달한다. 3. 전달받은p..

React 2021. 10. 30. 16:03

명언앱에서 한단계더나아가 간단한 Twittler를 만들어보자. 일단 Twittler를 fork하고, glt clone으로 가져온다. npm install로 필요한 모듈을 설치. vs코드를 열어확인해보면, 아직 우리가 서버와 통신을해서 트윗 데이터를 받아올수 없기에 더미데이터라는 몇개의 트윗이 작성되어있다. 이 트윗을 불러오는 연습을 하면된다. Bare Minimum Requirement 이러한 모습을 만드는게 최종목표인데, npm run start를 이용해 현재 상태를 확인해보면 이렇게 생겼다. 하나하나 만들어보자.. Sidebar 컴포넌트 기술 요구사항 App 컴포넌트의 후손 컴포넌트로 Sidebar 컴포넌트가 있어야 합니다. 하위 컴포넌트로 넣기위해서 App내부에 를 입력. Font Awesome을 ..

React 2021. 10. 27. 09:44

create react app을 이용해서 랜던 명언 앱 만들기! 먼저 내 터미널에 git, node, npm이 잘 설치되어있나 확인한다. >--version을 이용해 버전을 확인하면 알수 있음. 저는 옛날 버전을 사용하고있네요.. node가 최신이 14정도되는걸로 알고있는데.. 그리고 명언앱을 만들 폴더를 하나 만들기. 폴더만들기 mkdir 원하는폴더명 나는 mkdir random 으로 랜덤폴더를 생성. 생성한 폴더에 create reacr app 설치 npx create-reacr-app 프로젝트명을 입력하면 뭔가가 계속 설치됨. 설치가 끝나고 확인해보면 내가 입력했던 프로젝트명으로 폴더가 생기고 그 폴더안에 필요한 모든것들이 설치되어있다. vs코드로 폴더를 열어보면, 이러한 모습. 노드모듈폴더는 우리..

React 2021. 10. 26. 12:21

jsx를 열심히 배우고 포스팅한지 두달이 넘었고,, 오랜만에 쓰려니 까먹었다.. 다시 복습 중.. 연습문제1) ["Hello World", "Installation"] 이 부분을 똑같이 출력해보자 일단 저 두 타이틀을 불러오려면 posts[0].title, posts[1].title 인데 jsx에선 자바스크립트를 표시하기위해 중괄호를 사용해야하므로 {posts[0].title, posts[1].title} 그리고 동일하게 출력하기위해 대괄호를 추가한다. map을 이용한 반복 고차함수 map 1. 배열의 각 요소를 2. 특정 논리에 의해 3. 다른 요소로 지정한다. 이 map을 JSX에서 사용하려면 키값이 필수인데 key값으로 id값을 넣어준다. 정~말 키값으로 넣을게없다면 최후의 수단으로 배열의 인덱스를..

React 2021. 10. 25. 17:47