React

리엑트 첫 걸음!

Component는 재사용 가능한 UI 단위입니다. 컴포넌트는 독립적으로 재사용가능한 코드로 관리할 수 있습니다. > Component is very similar to function 컴포넌트는 input을 받아서 return 할 수 있습니다. 리엑트 컴포넌트에서는 input을 props라고 말하고 return은 화면에 보여져야할 리엑트 요소가 retu...

What is state? state는 컴포넌트의 상태 값을 말합니다. state와 props는 둘 다 object 이고, 화면에 보여줄 정보(상태)를 가지고 있다는게 매우 비슷합니다. 밑에 example은 버튼을 눌렀을 때, state를 변화시켜서 보여줘야할 텍스트를 바꾸는 코드입니다. click이라는 하나의 state 있지만 여러 개의 state를 ...

wecode에서 처음으로 westagram 팀 프로젝트를 진행하였다. 멘토님이 말하기를 최근에 커리큘럼에 추가된 프로젝트라고 한다. Project Goal > 이 프로젝트는 몇 주 뒤있을 실제 프로젝트 전 CRA로 react project 초기 세팅 플러스 git 협업 연습이 목적이다. Git Setting Process PM 한명이 초기 세팅을 진...

props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값. 자식 컴포넌트에서는 props를 받아오기만하고, 받아온 props를 직접 수정 할 수는 없다. state는 컴포넌트 내부에서 선언하며 내부에서 값을 변경 할 수 있습니다. 1. State > state는 단어 뜻 그대로 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값입니다. state는 화면에 보...

Why is Key important in React? 📍 Key를 안쓰면 어떻게 될까? 위 코드를 보면 map() 함수를 이용해 numbers 배열을 반복 실행하고 각 항목에 대해 ` 엘리먼트를 반환하고 배열의 결과를 listItems`에 저장하고 있습니다. 이 코드를 실행하면 react에서는 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시...

1.1 Let's learn about Array.map() 😎 > React로 개발하면서 가장 많이 쓰게 될 함수 중 하나는 map() 입니다. 실제로 Westagram project를 하면서도 제일 많이 썼었던거 같습니다. 이유는 웹에서 어떤 component를 반복해서 페이지에 distribute하기에 편하기 때문입니다. 하지만 생각보다 사용방법...

프로젝트를 하면서 느낀점 내가 구현한 코드중에 기억에 남는 코드 프로젝트를 한 후에 더 공부해야겠다고 생각한 분야 Westagram Project 🎉 Westagram project는 Wecode에 온뒤 처음으로 진행한 팀 프로젝트이다. 진짜 프로젝트를 시작하기전 warm up이라고 멘토님들이 말씀하셨지만 warm up 치고는 생각보다 많은 것을 배웠...