본문 바로가기

Web Study124

한입 크기로 잘라먹는 리액트 - 4 전에 더미 데이터를 선언해주고 그 데이터만 일기 리스트에 보이게 만들었었다. 이번에는 이 더미 데이터를 없애주고, 직접 일기를 입력해준 내용이 나오게 만들어줘본다. 부모 컴포넌트인 App 에서 data를 관리하는 state 함수를 만들어주고 일기를 입력 받는 자식 컴포넌트에게는 해당 입력 필드의 값을 읽어서 데이터를 추가해줄 수 있는 setData가 포함된 함수를 넣어주고 일기를 보여주는 자식 컴포넌트에는 입력 받은 data 자체를 보내줘서 관리해준다. function App() { const [data,setData] = useState([]); const dataId = useRef(0); const onCreate = (author, content, emotion) => { const created.. 2023. 3. 30.
한입 크기로 잘라먹는 리액트 - 3 Props 컴포넌트에 데이터를 전달하는 방법 부모 컴포넌트에서 자식 컴포넌트에게 속성과 값을 넘겨주는 것 props 를 사용하여 데이터를 전달하면 컴포넌트는 해당 데이터를 활용하여 UI를 동적으로 생성하고 업데이트 할 수 있다. 기본적으로 키=값 형태로 넘겨주게 되는데, 넘겨줄 속성이 많아지면 속성:속성값 형태의 객체로 만들어서 전개 연산자(...)와 함께 사용해준다. const customProps = { 속성: 속성값, 속성2: 속성값2, }; // ... 결과적으로 자식 컴포넌트에서는 위에서 받아준 속성값을 props 객체에 담아서 넘겨주게 된다. 비 구조화 할당을 활용하여 props 객체에 담겨오는 속성값만 접근해줄 수 있다. // children 은 props 객체에서 children 키만 받아.. 2023. 3. 29.
한입 크기로 잘라먹는 리액트 - 2 자바스크립트 기초와 응용은 일단락 지었고, node 부분은 원래 배웠던 부분이 있어서 개념만 잡는 느낌이라 가볍게 넘어간다... CommonJS 방식으로 require('randomcolor') 로 가져와서 randomColor() 함수를 사용해줄 수 있다. 드디어, 리액트! Node 기반의 jS UI 라이브러리 - Webpack : 다수의 자바스크립트 파일을 하나의 파일로 합쳐주는 모듈 번들 라이브러리 - Babel : JSX 를 사용할 수 있도록 해주는 컴파일 라이브러리 왜 리액트인가? 1. 리액트는 Component 기반의 UI 라이브러리이다. 기본적으로 중복 되는 코드 부분(헤더, 푸터 등)의 수정이 필요한 경우, 산탄총 수술(1발로 다수의 총상을 입는다는...) 이라고 불리는 문제가 발생하여, .. 2023. 3. 27.
원티드 프리온보딩 FE 4월 사전과제 제출 전 정리 이번에 알게되어 참가하려고 공부해본다. 다만.. 아직 리액트를 배운지 며칠 되지 않아서 Hooks 이라든가 라이프사이클? 이런걸 모르기에 시작하기 전에 힘내서 공부해둘 예정이다. React 라이프 사이클 클래스형 컴포넌트에서 사용했던 것으로 요즘 주로 사용되는 함수형 컴포넌트에선 지원하지 않는다고 알고 있다. 대신 Hook 이라는 기술을 사용한다는데, 그럼에도 불구하고 알아둬야 하는 이유는 클래스형 컴포넌트를 함수형 컴포넌트로 리팩토링 해야 하는 일이 생길 수 있기 때문이라고 본다. 라이프 사이클은 컴포넌트가 생성되고 업데이트 되고 파괴될 때 일어나는 일련의 단계이자 생명 주기이다. 크게 3가지로 나눠지며 라이프 사이클 메서드를 통하여 제어할 수 있다. 1. 생성 Mounting 컴포넌트가 DOM 상에 .. 2023. 3. 26.

티스토리툴바