본문 바로가기
목차

[노트장] 적으며 정리해 보는 이론60

[리액트문서보기][상호작용성 더하기] 이벤트에 응답하기 학습내용 이벤트 핸들러를 작성하는 여러가지 방법 이벤트 핸들링 로직을 부모 컴포넌트에서 전달하는 방법 이벤트가 전파되는 방식와 이를 멈추는 방법 ◼ 이벤트 핸드러 추가하기 이벤트 핸들러 추가를 위해서는 먼저 함수를 정의하고 이를 적절한 JSX 태그에 props 형태로 전달 해야 합니다. // 함수형 export default function Button() { function handleClick() { // Button 외부에 있어도됨(참조할 값 유무에 따라) alert('You clicked me!'); } return ( Click me ); } // 인라인 형 이벤트 핸들러 함수는 다음 특징을 가집니다 - 주로 컴포넌트 내부에서 정의됩니다. - handle로 시작하고 그 뒤에 이벤트명을 붙인 함수.. 2024. 3. 25.
[리액트문서보기][UI 표현하기]컴포넌트 순수하게 유지하기 ◼ 순수함수 자바스크립트 일부 함수는 순수합니다. 순수 함수는 오직 연산만을 수행합니다. 컴포넌트를 엄격하게 순수함수로 작성하면 코드베이스가 점점 커지더라도 예상밖의 동작이나 당황케하는 버그를 피할 수 있습니다. React는 이러한 컨셉 기반에 설계되었습니다. React는 작성되는 모든 컴포넌트가 순수 함수일 거라 가정합니다. 이러한 가정은 작성되는 React 컴포넌트가 같은 입력이 주어진다면 반드시 같은 JSX를 반환한다는 것을 의미합니다. 순수 함수란 두 가지 중요한 특성을 갖습니다 함수는 같은 입력에 대해 항상 같은 출력을 반환합니다. ( 붕어빵 틀에 동일한 재료를 넣으면 항상 동일한 모양과 크기의 붕어빵이 나오는 것과 같이, 함수에 동일한 입력 값을 넣으면 항상 동일한 출력 값을 얻습니다. 이것이.. 2024. 3. 25.
[리액트문서보기][UI 표현하기]중괄호 있는 JSX 안에서 자바스크립트 사용하기 학습내용 따옴표로 문자열을 전달하는 방법 중괄호가 있는 JSX 안에서 JavaScript 변수를 참조하는 방법 중괄호가 있는 JSX 안에서 JavaScript 함수를 호출하는 방법 중괄호가 있는 JSX 안에서 JavaScript 객체를 사용하는 방법 ◼ 따옴표 문자열 JSX에 전달하려면 작은따옴표('')나 큰따옴표("")로 묶어야 합니다. 동적으로 사용할떄는 {} 중괄호를 사용합니다. [+중요] '',"" 와 {} 차이점은. 중괄호를 사용하면 마크업에서 바로 JavaScript를 사용할 수 있으며, state에 저장된 데이터를 실시간을 반영이 가능합니다. ◼ 중괄호 사용하기: JavaScript 세계로 연결 하는 창 {} 사이에는 javascript 코드를 사용할수 있습니다. const today = n.. 2024. 3. 19.
[리액트문서보기][UI 표현하기] 첫번째 컴포넌트 학습내용 컴포넌트가 무엇인지 React 어플리케이션에서 컴포넌트의 역할 첫번째 React 컴포넌트를 작성하는 방법 ◼ 컴포넌트: UI 구성요소 HTML은 웹에서 풍부한 구조의 문서를 만드는 데 사용되는 마크업 언어입니다. React는 사용자가 마크업, CSS, JavaScript를 결합하여 재사용 가능한 UI 요소인 컴포넌트를 만들 수 있게 해줍니다. React 컴포넌트는 HTML 태그와 마찬가지로 조합, 정렬 및 중첩하여 전체 페이지를 디자인할 수 있습니다. 프로젝트가 성장함에 따라 컴포넌트를 재사용하여 개발 속도를 높일 수 있으며, React 커뮤니티에서는 수천 개의 컴포넌트를 공유하고 있습니다. ◼ 컴포넌트 정의하기 예전에는 웹 페이지를 만들 때 주로 콘텐츠를 꾸며주고, 그 다음에 상호작용을 추가할.. 2024. 3. 19.
[리액트문서보기] React로 사고하기(구조 나누기, state위치 선정 등) 리액트 사고하기에서는 한가지 예제를 가지고 쭉~ 설명을 합니다. 이미 JSON API와 디자이너의 목업이 있다고 가정해 보겠습니다. [ { category: "Fruits", price: "$1", stocked: true, name: "Apple" }, { category: "Fruits", price: "$1", stocked: true, name: "Dragonfruit" }, { category: "Fruits", price: "$2", stocked: false, name: "Passionfruit" }, { category: "Vegetables", price: "$2", stocked: true, name: "Spinach" }, { category: "Vegetables", price: ".. 2024. 3. 18.
[리액트문서보기] Quick Start [참고] https://react-ko.dev/learn ◼ 컴포넌트 생성 및 중첩하기 function MyButton() { return ( Im a button ); } export default function MyApp() { return ( Welcome to my app ); } React 컴포넌트 이름은 항상 대문자로 시작해야 하고 HTML 태그는 소문자로 시작해야 합니다. export , export default 키워드로 외부에서 사용할수 있게 component 지정 ◼ JSX로 마크업 작성 하기 JSX는 HTML보다 더 엄격합니다. 과 같은 모습으로 태그를 닫아야 합니다. 또한 컴포넌트는 여러 개의 JSX 태그를 반환할 수 없습니다. ... 또는 빈 ... 래퍼와 같이 하나의 공유 부모.. 2024. 3. 17.
[리액트] useState ◼ useState Hook의 한 종류 중 하나로, 상태(state) 관리합니다. 상태 관리라 하면, 입력값, 변수값 등 값을 저장해야 하는 저장하는 컴포넌트별 메모리를 state라고 합니다.컴포넌트의 렌더링 사이에 데이터를 state에 유지하고 새로운 데이터로 컴포넌트를 다시 렌더링 하는 데 사용하는 Hook입니다. 주의사항 - 함수 안에서 set 함수를 호출한 후 값을 업데이트 하여도 state 변수에는 여전히 호출 전 값이 출력됩니다. const [age, setAge] = useState(42); const [name, setName] = useState([]); function handleClick() { setAge(45); console.log(age); // 출력:42 setName([.... 2024. 3. 16.
[리액트기초] Hook ◼ Hook이란 Hook은 React 16.8 버전부터 도입된 새로운 기능으로, 함수형 컴포넌트에서 상태(state)와 생명주기(lifecycle) 기능을 사용할 수 있게 해줍니다. 이전에는 클래스형 컴포넌트에서만 상태와 생명주기를 관리할 수 있었지만, Hook을 사용하면 함수형 컴포넌트에서도 동일한 기능을 사용할 수 있게 되었습니다. Hook을 사용하여 상태를 관리하며 로직의 복잡성을 줄이고 재사용을 높이며 가독성 또한 쉽도록 만들어 줍니다. Hook의 종류 더 많은 종류가 있지만 여기서는 몇가지만 설명하겠습니다. useState: 함수형 컴포넌트에서 상태를 추가하고 관리하는 데 사용됩니다. useEffect: 컴포넌트의 렌더링 사이클과 관련하여 side effect를 수행하는 데 사용됩니다. 예를 들.. 2024. 3. 15.
[리액트기초] style 입히기 ◼ style 입히기 리액트에는 style 라이브러리가 있어서 사용을 하지만 기본적으로 사용할수 있는 방법을 먼저 적어봅니다. React style 라이브러리 styled-components emotion Material-UI Ant Design Tailwind CSS 우선순위 인라인, css모듈, 외부 css, 프레임워크/ 라이브러리 css 등등 있있습니다. 1. 인라인 2. css모듈 3. 외부 css ◼ 인라인 스타일로 적용하기 const divStyle = { color: 'blue', backgroundColor: 'lightgray' // '-' 대신 카멜기법으로 작성한다 }; function App() { return ( Hello, World! // style에 연결하여 사용 ); } ◼ .. 2024. 3. 15.
[리액트기초] Props : 전달 (children도) ◼ Props props는 상위부모에서 자식에세 값을 전달할때 사용됩니다.다른이름으로 사용해도 되지만 일반적으로 정해진 이름이 'props'이기에 가급적 따라가는게 좋습니다. props의 전달 방법과 받는 방법을 설명하겠습니다.  props로 받기1. 왼쪽: 전달 / 2. 오른쪽: 받는1. Button component에 이벤트와, 문구를 전달을 하고있습니다.2. Button(props) => 전달해준 값을 props라는 통에 담아 가지고 온것입니다.그래서 객체구조 이기에 props.프로퍼티로 사용하여전달 받은 값을 다양한 방식으로 데이터를 처리하고 화면을 렌더링할 수 있습니다.// 전달 받은 구조props = { name : '클릭해주세요', event : con.. 2024. 3. 15.

티스토리툴바