일상에서 개발하기

[Spring Security] 인가(Authorization) 설정하기

dev-in-daily-life — Mon, 18 Aug 2025 21:17:09 +0900

인가(Authorization) 설정입니다.

이번 단계에서는

hasRole() vs hasAuthority() 차이
URL 기반 권한 설정
메서드 기반 권한(@PreAuthorize)
다중 권한 처리

를 정리합니다.

4-1. hasRole() vs hasAuthority() 차이

메서드	내부 동작	예시
hasRole("ADMIN")	내부적으로 "ROLE_ADMIN" 권한이 있는지 검사	roles("ADMIN") 로 만든 계정만 통과
hasAuthority("ROLE_ADMIN")	"ROLE_ADMIN" 권한이 있는지 그대로 검사	DB에서 ROLE_ 접두사 포함한 권한 직접 체크

중요: hasRole() 은 자동으로 "ROLE_" prefix를 붙입니다.

그래서 DB에 ROLE_ADMIN을 저장했다면,

hasRole("ADMIN") 또는 hasAuthority("ROLE_ADMIN") 둘 다 가능하지만 혼용 시 주의해야 합니다.

4-2. URL 기반 권한 설정 예시

파일명: SecurityConfig.java

package com.example.security;


import lombok.RequiredArgsConstructor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.security.crypto.password.PasswordEncoder;
import org.springframework.security.web.SecurityFilterChain;


@Configuration
@RequiredArgsConstructor
public class SecurityConfig {


    @Bean
    public PasswordEncoder passwordEncoder() {
        return new BCryptPasswordEncoder();
    }


    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http
            .authorizeHttpRequests(auth -> auth
                .requestMatchers("/", "/public/**").permitAll()
                .requestMatchers("/admin/**").hasRole("ADMIN")      // ROLE_ADMIN 필요
                .requestMatchers("/manager/**").hasAnyRole("ADMIN", "MANAGER") // ROLE_ADMIN 또는 ROLE_MANAGER
                .requestMatchers("/api/**").hasAuthority("ROLE_API") // ROLE_ 접두사까지 명시
                .anyRequest().authenticated()
            )
            .formLogin(form -> form.permitAll())
            .logout(logout -> logout.permitAll())
            .csrf(csrf -> csrf.disable());


        return http.build();
    }
}

4-3. 메서드 보안(@PreAuthorize) 사용

스프링 시큐리티는 URL 보안뿐만 아니라, 메서드 호출 시점에서도 권한 체크를 할 수 있습니다.

예를 들어 Controller, Service, Repository 메서드에 권한을 걸 수 있습니다.

1. 설정 클래스에 @EnableMethodSecurity 추가

import org.springframework.security.config.annotation.method.configuration.EnableMethodSecurity;


@Configuration
@EnableMethodSecurity // 메서드 보안 활성화
public class SecurityConfig {
    // ... 기존 설정
}

2. 컨트롤러 예시

package com.example.controller;


import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;


@RestController
public class AdminController {


    @PreAuthorize("hasRole('ADMIN')") // ROLE_ADMIN 필요
    @GetMapping("/admin/data")
    public String adminData() {
        return "관리자 전용 데이터";
    }


    @PreAuthorize("hasAnyRole('ADMIN', 'MANAGER')")
    @GetMapping("/admin/manager/data")
    public String adminOrManagerData() {
        return "관리자 또는 매니저 데이터";
    }


    @PreAuthorize("hasAuthority('ROLE_API')")
    @GetMapping("/api/data")
    public String apiData() {
        return "API 전용 데이터";
    }
}

4-4. 다중 권한 처리

URL 방식

.requestMatchers("/reports/**").hasAnyRole("ADMIN", "MANAGER")

@PreAuthorize 방식

@PreAuthorize("hasAnyAuthority('ROLE_ADMIN', 'ROLE_MANAGER')")

4-5. 정리

hasRole() : 내부적으로 ROLE_ prefix를 붙이므로 "ADMIN"만 적어도 "ROLE_ADMIN" 권한을 찾음
hasAuthority() : 전체 권한 문자열을 그대로 비교 (ex. "ROLE_ADMIN")
URL 보안과 메서드 보안을 병행하면 더 안전한 설계 가능
실무에서는 API 서버인 경우, URL 기반 보안 + JWT 기반 인가 조합이 일반적

[Spring Security] 스프링 시큐리티 사용자 인증 구현하기

dev-in-daily-life — Wed, 13 Aug 2025 21:11:24 +0900

메모리 사용자(InMemoryUserDetailsManager) 와 DB 기반 사용자(UserDetailsService) 를 순서대로 구현해볼게요.

(예제는 Spring Security 6.x / Spring Boot 3.x 기준)

InMemoryUserDetailsManager (빠르게 동작 확인)

✅ 구성요소

PasswordEncoder : 비밀번호 암호화(BCrypt)
InMemoryUserDetailsManager : 메모리에 사용자 저장
SecurityFilterChain : 폼 로그인 켜두고 URL 권한 설정

SecurityConfig.java

package com.example.security;


import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.core.userdetails.User;
import org.springframework.security.core.userdetails.UserDetails;
import org.springframework.security.core.userdetails.UserDetailsService;
import org.springframework.security.provisioning.InMemoryUserDetailsManager;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.security.crypto.password.PasswordEncoder;
import org.springframework.security.web.SecurityFilterChain;


@Configuration
public class SecurityConfig {


    // ✅ 비밀번호 암호화기 Bean 등록
    @Bean
    public PasswordEncoder passwordEncoder() {
        // BCryptPasswordEncoder: 해시 기반 암호화, 복호화 불가능 (보안에 안전)
        return new BCryptPasswordEncoder();
    }


    // ✅ 메모리 기반 사용자 저장소 Bean 등록
    @Bean
    public UserDetailsService userDetailsService(PasswordEncoder encoder) {
        // User.withUsername(): username, password, roles 지정 가능
        // roles("USER") → 내부적으로 "ROLE_USER"로 매핑됨
        UserDetails user = User.withUsername("user")
                .password(encoder.encode("1234")) // 비밀번호 암호화 필수
                .roles("USER") // ROLE_USER
                .build();


        UserDetails admin = User.withUsername("admin")
                .password(encoder.encode("1234")) // 비밀번호 암호화 필수
                .roles("ADMIN") // ROLE_ADMIN
                .build();


        // InMemoryUserDetailsManager: 메모리에 사용자 저장
        return new InMemoryUserDetailsManager(user, admin);
    }


    // ✅ SecurityFilterChain Bean 등록
    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http
            // URL별 접근 권한 설정
            .authorizeHttpRequests(auth -> auth
                .requestMatchers("/", "/public/**", "/css/**", "/js/**", "/images/**").permitAll() // 인증 없이 허용
                .requestMatchers("/admin/**").hasRole("ADMIN") // ROLE_ADMIN 필요
                .anyRequest().authenticated() // 나머지는 인증 필요
            )
            // 폼 로그인 설정
            .formLogin(form -> form
                .loginPage("/login") // 커스텀 로그인 페이지 지정
                .permitAll() // 로그인 페이지는 인증 없이 접근 가능
            )
            // 로그아웃 설정
            .logout(logout -> logout.permitAll())
            // 개발 편의를 위해 CSRF 비활성화 (실무에서는 활성 유지)
            .csrf(csrf -> csrf.disable());


        // 최종 SecurityFilterChain 반환
        return http.build();
    }
}

이 상태로 애플리케이션 실행 후:

/login에서 user/1234, admin/1234 로 로그인 테스트 가능
/admin/**는 admin만 접근 가능

DB 기반 사용자 인증 (실무 기본)

✅ 구성요소

UserDetails 구현체: 내 엔티티 → 스프링 보안 사용자로 변환
UserDetailsService 구현체: username으로 사용자 조회
PasswordEncoder: BCrypt
(선택) DaoAuthenticationProvider 등록

1) 테이블 스키마(예시, JPA 기준)

DDL 예시

CREATE TABLE users (
    id BIGINT PRIMARY KEY AUTO_INCREMENT,
    username VARCHAR(50) UNIQUE NOT NULL,
    password VARCHAR(100) NOT NULL,
    role VARCHAR(30) NOT NULL,      -- 예: ROLE_USER, ROLE_ADMIN
    enabled BOOLEAN NOT NULL DEFAULT TRUE
);

❗️팁

role을 DB에는 "ROLE_USER" 형태로 저장하면 코드에서 매핑이 명확합니다.
이미 "USER"만 저장한다면, 매핑 시 "ROLE_" prefix를 붙여주세요.

2) 엔티티 & 레포지토리

UserAccount.java

package com.example.security.user; // 사용자 엔티티 패키지


import jakarta.persistence.*; // JPA 어노테이션
import lombok.Getter;
import lombok.NoArgsConstructor;
import lombok.AllArgsConstructor;
import lombok.Builder;


@Entity // JPA 엔티티 클래스
@Table(name = "users") // 매핑할 테이블명 지정
@Getter
@NoArgsConstructor
@AllArgsConstructor
@Builder
public class UserAccount {


    @Id // PK 지정
    @GeneratedValue(strategy = GenerationType.IDENTITY) // AUTO_INCREMENT
    private Long id;


    @Column(nullable=false, unique=true, length=50) // NOT NULL, UNIQUE 제약조건
    private String username;


    @Column(nullable=false, length=100) // NOT NULL, 최대 길이 100
    private String password;


    @Column(nullable=false, length=30) // ROLE_USER / ROLE_ADMIN
    private String role;


    @Column(nullable=false) // 계정 활성 여부
    private boolean enabled = true;
}

UserAccountRepository.java

package com.example.security.user;


import java.util.Optional;
import org.springframework.data.jpa.repository.JpaRepository;


// JpaRepository 상속 → CRUD 메서드 자동 제공
public interface UserAccountRepository extends JpaRepository<UserAccount, Long> {


    // username으로 사용자 조회
    Optional<UserAccount> findByUsername(String username);
}

3) UserDetails 구현체

CustomUserDetails.java

package com.example.security.auth;


import java.util.Collection;
import java.util.List;
import org.springframework.security.core.GrantedAuthority;
import org.springframework.security.core.authority.SimpleGrantedAuthority;
import org.springframework.security.core.userdetails.UserDetails;


import com.example.security.user.UserAccount;


// UserDetails 구현 → Spring Security에서 사용할 사용자 객체
public class CustomUserDetails implements UserDetails {


    private final UserAccount account; // DB 사용자 정보


    public CustomUserDetails(UserAccount account) {
        this.account = account;
    }


    @Override
    public Collection<? extends GrantedAuthority> getAuthorities() {
        // DB role 값 그대로 사용 (예: ROLE_USER)
        return List.of(new SimpleGrantedAuthority(account.getRole()));
    }


    @Override
    public String getPassword() { return account.getPassword(); }


    @Override
    public String getUsername() { return account.getUsername(); }


    @Override
    public boolean isAccountNonExpired() { return true; } // 계정 만료 여부


    @Override
    public boolean isAccountNonLocked() { return true; } // 계정 잠금 여부


    @Override
    public boolean isCredentialsNonExpired() { return true; } // 비밀번호 만료 여부


    @Override
    public boolean isEnabled() { return account.isEnabled(); } // 계정 활성화 여부
}

4) UserDetailsService 구현

CustomUserDetailsService.java

package com.example.security.auth;


import com.example.security.user.UserAccount;
import com.example.security.user.UserAccountRepository;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Service;
import org.springframework.security.core.userdetails.UserDetails;
import org.springframework.security.core.userdetails.UserDetailsService;
import org.springframework.security.core.userdetails.UsernameNotFoundException;


@Service // 서비스 계층 빈 등록
@RequiredArgsConstructor // final 필드 자동 생성자 주입
public class CustomUserDetailsService implements UserDetailsService {


    private final UserAccountRepository userAccountRepository; // DB 접근 레포지토리


    @Override
    public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {
        // username으로 사용자 조회, 없으면 예외 발생
        UserAccount account = userAccountRepository.findByUsername(username)
                .orElseThrow(() -> new UsernameNotFoundException("사용자를 찾을 수 없습니다: " + username));
        // UserDetails 구현체 반환
        return new CustomUserDetails(account);
    }
}

5) 시큐리티 설정 (DB 인증 사용)

SecurityConfig.java

package com.example.security;


import com.example.security.auth.CustomUserDetailsService;
import lombok.RequiredArgsConstructor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.authentication.dao.DaoAuthenticationProvider;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.security.crypto.password.PasswordEncoder;
import org.springframework.security.web.SecurityFilterChain;


@Configuration // Spring 설정 클래스
@RequiredArgsConstructor // final 필드 자동 생성자
public class SecurityConfig {


    private final CustomUserDetailsService customUserDetailsService;


    // ✅ 비밀번호 암호화기
    @Bean
    public PasswordEncoder passwordEncoder() {
        return new BCryptPasswordEncoder();
    }


    // ✅ DB 기반 인증 제공자 등록
    @Bean
    public DaoAuthenticationProvider daoAuthenticationProvider(PasswordEncoder encoder) {
        DaoAuthenticationProvider provider = new DaoAuthenticationProvider();
        provider.setUserDetailsService(customUserDetailsService); // DB 조회 서비스
        provider.setPasswordEncoder(encoder); // 비밀번호 인코더
        return provider;
    }


    // ✅ SecurityFilterChain
    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http,
                                                   DaoAuthenticationProvider authProvider) throws Exception {
        http
            .authenticationProvider(authProvider) // DB 인증 제공자 적용
            .authorizeHttpRequests(auth -> auth
                .requestMatchers(PathRequest.toH2Console()).permitAll()    // H2 콘솔은 로그인 없이 허용
                .requestMatchers("/", "/public/**", "/css/**", "/js/**", "/images/**").permitAll()
                .requestMatchers("/admin/**").hasRole("ADMIN") // ROLE_ADMIN 필요
                .anyRequest().authenticated()
            )
            .formLogin(form -> form
                .loginPage("/login") // 커스텀 로그인 페이지
                .defaultSuccessUrl("/", true) // 로그인 성공 후 이동할 페이지
                .permitAll()
            )
            .logout(logout -> logout.permitAll())
            .csrf(csrf -> csrf.disable()); // 개발 단계에서만 CSRF 비활성화
// ✅ H2 콘솔은 프레임을 사용 → 동일 출처만 허용
            .headers(headers -> headers
                .frameOptions(frame -> frame.sameOrigin())
            );


        return http.build();
    }
}

참고: DaoAuthenticationProvider를 직접 등록하지 않아도 UserDetailsService + PasswordEncoder 빈이 있으면 스프링이
자동 구성합니다.

다만 명시 등록은 확장(잠금정책, 에러메시지 커스터마이징 등)에 유리합니다.

6) 초기 사용자 데이터(비밀번호는 반드시 BCrypt)

테스트용 INSERT (스프링 환경에서 인코딩)

// 임시 실행 코드 또는 CommandLineRunner에서
var encoder = new BCryptPasswordEncoder();
String raw = "1234";
String encoded = encoder.encode(raw);
// INSERT INTO users(username, password, role, enabled) VALUES ('admin', '{encoded}', 'ROLE_ADMIN', true);

정리 & 팁

roles vs authorities
PasswordEncoder 필수
예외 메시지/핸들러
테스트

1) 의존성 추가

Maven

<!-- JPA -->
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<!-- 개발용 내장 DB (택1) -->
<dependency>
  <groupId>com.h2database</groupId>
  <artifactId>h2</artifactId>
  <scope>runtime</scope>
</dependency>
<!-- 실DB 드라이버: 사용하는 DB에 맞춰 하나만 추가 -->
<!-- MySQL -->
<dependency>
  <groupId>com.mysql</groupId>
  <artifactId>mysql-connector-j</artifactId>
  <scope>runtime</scope>
</dependency>
<!-- MariaDB -->
<!--
<dependency>
  <groupId>org.mariadb.jdbc</groupId>
  <artifactId>mariadb-java-client</artifactId>
  <scope>runtime</scope>
</dependency>
-->
<!-- PostgreSQL -->
<!--
<dependency>
  <groupId>org.postgresql</groupId>
  <artifactId>postgresql</artifactId>
  <scope>runtime</scope>
</dependency>
-->

Gradle (Groovy)

implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
runtimeOnly 'com.h2database:h2'                 // 개발용
runtimeOnly 'com.mysql:mysql-connector-j'       // 실DB(예: MySQL)
// 필요 시 교체:
// runtimeOnly 'org.mariadb.jdbc:mariadb-java-client'
// runtimeOnly 'org.postgresql:postgresql'

Gradle (Kotlin DSL)

implementation("org.springframework.boot:spring-boot-starter-data-jpa")
runtimeOnly("com.h2database:h2")                 // dev
runtimeOnly("com.mysql:mysql-connector-j")       // prod
// 필요 시 교체:
// runtimeOnly("org.mariadb.jdbc:mariadb-java-client")
// runtimeOnly("org.postgresql:postgresql")
Spring Boot BOM이 버전 관리를 해주니 별도 버전 명시는 보통 필요 없습니다.

2) 기본 설정 예시

(A) 개발용 H2

src/main/resources/application.yml

spring:
  datasource:
    url: jdbc:h2:mem:testdb;MODE=MySQL;DATABASE_TO_LOWER=TRUE
    # jdbc:h2:mem:testdb → 메모리 DB로 testdb라는 이름 사용
    # MODE=MySQL → H2 SQL 문법을 MySQL 스타일로 호환
    # DATABASE_TO_LOWER=TRUE → 대소문자 구분 없이 소문자로 테이블명/컬럼명 처리
    driver-class-name: org.h2.Driver   # H2 전용 드라이버
    username: sa                       # 기본 계정
    password:                          # 비밀번호 없음
  jpa:
    hibernate:
      ddl-auto: update                  # 엔티티 변경 시 DB 스키마 자동 반영 (dev 전용)
    properties:
      hibernate:
        format_sql: true                # SQL을 보기 좋게 포맷팅
    open-in-view: false                 # OSIV(Open Session In View) 비활성화 (권장)
  h2:
    console:
      enabled: true                     # H2 웹 콘솔 활성화
      path: /h2-console                  # 웹 콘솔 접근 경로 (http://localhost:8080/h2-console)


logging:
  level:
    org.hibernate.SQL: debug            # 실행되는 SQL 로그 출력
    org.hibernate.orm.jdbc.bind: trace  # SQL 파라미터 바인딩 값까지 출력

(B) 실DB (예: MySQL)

src/main/resources/application.yml

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/appdb?serverTimezone=Asia/Seoul&characterEncoding=utf8
    # jdbc:mysql:// → MySQL 프로토콜
    # localhost:3306 → DB 서버 주소와 포트
    # appdb → 데이터베이스 이름
    # serverTimezone=Asia/Seoul → 시간대 설정
    # characterEncoding=utf8 → 문자 인코딩
    username: appuser                   # DB 사용자명
    password: secret                    # DB 비밀번호
  jpa:
    hibernate:
      ddl-auto: validate                 # 엔티티와 DB 스키마가 일치하는지 검증만 (운영 권장)
    properties:
      hibernate:
        dialect: org.hibernate.dialect.MySQL8Dialect # MySQL 8 전용 방언(Dialect)
        format_sql: true                # SQL 포맷팅
    open-in-view: false                  # OSIV 비활성화 (트랜잭션 범위 명확하게)


logging:
  level:
    org.hibernate.SQL: debug            # 실행되는 SQL 로그 출력
    org.hibernate.orm.jdbc.bind: trace  # SQL 파라미터 로그 출력

각 속성별 설명 요약

속성	설명
spring.datasource.url	DB 접속 주소 (DB 종류, 서버 위치, 포트, DB명, 옵션 포함)
spring.datasource.driver-class-name	JDBC 드라이버 클래스명
spring.datasource.username	DB 접속 계정명
spring.datasource.password	DB 접속 비밀번호
spring.jpa.hibernate.ddl-auto	엔티티와 DB 스키마 동기화 전략 (create, update, validate, none)
spring.jpa.properties.hibernate.dialect	사용하는 DB 방언(Dialect)
spring.jpa.properties.hibernate.format_sql	SQL 로그 포맷팅 여부
spring.jpa.open-in-view	OSIV 활성화 여부 (false 권장)
spring.h2.console.enabled	H2 웹 콘솔 사용 여부
spring.h2.console.path	H2 웹 콘솔 경로
logging.level.org.hibernate.SQL	실행되는 SQL 로그 레벨
logging.level.org.hibernate.orm.jdbc.bind	SQL 바인딩 파라미터 로그 레벨

3) JPA 코드 주의점 (Spring Boot 3 / Jakarta)

import jakarta.persistence.*; (javax 아님)
엔티티 예:

import jakarta.persistence.*;

@Entity
@Table(name = "users")
public class UserAccount {
  @Id @GeneratedValue(strategy = GenerationType.IDENTITY)
  private Long id;
  
@Column(nullable=false, unique=true, length=50)
  private String username;
  
@Column(nullable=false, length=100)
  private String password;
  
@Column(nullable=false, length=30)
  private String role;
  
@Column(nullable=false)
  private boolean enabled = true;
// getters/setters ...

}

이제 앞서 드린 DB 인증(UserDetailsService) 코드가 정상 동작할 준비가 되었습니다.

[Spring Security] 스프링 시큐리티 적용하기

dev-in-daily-life — Wed, 13 Aug 2025 21:03:27 +0900

SecurityFilterChain 커스터마이징과 URL 인증 예외 처리를 해보겠습니다.

기본 시큐리티 동작

Spring Security를 의존성에 추가하면 기본 동작은 다음과 같습니다.

모든 요청 → 인증 필요
기본 로그인 페이지(/login) 제공
콘솔에 출력된 랜덤 패스워드로 로그인 가능 (username은 user)

하지만 실무에서는 일부 URL은 인증 없이 접근 가능하도록 해야 합니다.

예) /, /css/**, /js/**, /images/**, /public/** 등 정적 리소스

특정 요청 인증 예외 처리

파일명: SecurityConfig.java

package com.example.security;


import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.web.SecurityFilterChain;


@Configuration // 이 클래스가 스프링의 설정 클래스임을 명시
public class SecurityConfig {


    @Bean // SecurityFilterChain을 Bean으로 등록 (Spring Security 6 방식)
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http
            // ✅ URL별 접근 권한을 설정하는 구간
            .authorizeHttpRequests(auth -> auth
                // requestMatchers(): 특정 경로에 대한 접근 권한 지정
                .requestMatchers("/", "/public/**", "/css/**", "/js/**", "/images/**").permitAll()
                // permitAll(): 인증 없이 누구나 접근 가능
                .anyRequest().authenticated() // 그 외 모든 요청은 인증 필요
            )


            // ✅ 폼 로그인 설정
            .formLogin(form -> form
                // loginPage(): 커스텀 로그인 페이지 경로 지정
                .loginPage("/login")
                // permitAll(): 로그인 페이지 접근은 인증 없이 허용
                .permitAll()
            )


            // ✅ 로그아웃 설정
            .logout(logout -> logout
                // logoutUrl(): 로그아웃 요청 URL 지정
                .logoutUrl("/logout")
                // permitAll(): 로그아웃 요청은 누구나 가능
                .permitAll()
            )


            // ✅ CSRF 설정
            // 기본적으로 CSRF가 활성화되어 POST/PUT/DELETE 요청 시 토큰 필요
            // 개발·테스트 단계에서는 편의상 비활성화 가능
            .csrf(csrf -> csrf.disable());


        // http.build(): 설정된 SecurityFilterChain 객체를 반환
        return http.build();
    }
}

주요 메서드 정리

메서드	역할
authorizeHttpRequests()	요청 URL에 따라 인증/인가 규칙을 정의
requestMatchers()	특정 패턴의 URL을 선택
permitAll()	해당 URL은 인증 없이 접근 가능
authenticated()	해당 URL은 인증된 사용자만 접근 가능
formLogin()	폼 기반 로그인 기능 활성화
loginPage()	커스텀 로그인 페이지 경로 지정
logout()	로그아웃 기능 활성화 및 설정
logoutUrl()	로그아웃 요청 경로 지정
csrf().disable()	CSRF 보호 비활성화 (개발용)
build()	SecurityFilterChain 객체 생성

이렇게 설정하면, 예를 들어 /admin에 접근하려고 하면 로그인하지 않은 경우 /login으로 리다이렉트되고,
정적 리소스(/css/** 등)는 로그인 없이 접근이 가능합니다.

커스텀 로그인 페이지 만들기

파일명: LoginController.java

package com.example.security;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
 
@Controller
public class LoginController {
	// 로그인 페이지 매핑
    @GetMapping("/login")
    public String loginPage() {
        return "login"; // templates/login.html
    }
}

파일명: src/main/resources/templates/login.html

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>로그인</title>
</head>
<body>
<h2>로그인 페이지</h2>
<form th:action="@{/login}" method="post">
    <div>
        <label>아이디: <input type="text" name="username"></label>
    </div>
    <div>
        <label>비밀번호: <input type="password" name="password"></label>
    </div>
    <div>
        <button type="submit">로그인</button>
    </div>
</form>
</body>
</html>

의존성 설정

Maven

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-security</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

Gradle (Groovy)

implementation 'org.springframework.boot:spring-boot-starter-security'
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

Gradle (Kotlin DSL)

implementation("org.springframework.boot:spring-boot-starter-security")
implementation("org.springframework.boot:spring-boot-starter-thymeleaf")

이렇게 하면 /, /public/** 등은 로그인 없이 접근 가능하고,

다른 페이지에 접근하려 하면 /login 페이지로 리다이렉트됩니다.

[Spring Security] 스프링 시큐리티 기본 개념 익히기

dev-in-daily-life — Wed, 13 Aug 2025 20:59:15 +0900

인증(Authentication) vs 인가(Authorization)

구분	설명	예시
인증 (Authentication)	사용자가 누구인지 확인하는 절차	"너 진짜 홍길동이 맞아?" → 로그인 ID/비번 확인
인가 (Authorization)	인증된 사용자가 무엇을 할 수 있는지 결정	"홍길동은 /admin 페이지 볼 권한이 있나?"

➡ 인증이 먼저, 그 다음에 인가가 진행됩니다.

스프링 시큐리티의 필터 기반 구조

스프링 시큐리티는 FilterChain 기반으로 동작합니다.

즉, 모든 HTTP 요청은 DispatcherServlet에 도달하기 전에 SecurityFilterChain을 거칩니다.

Client → SecurityFilterChain → DispatcherServlet → Controller

기본적으로 다음과 같은 필터들이 있습니다.

UsernamePasswordAuthenticationFilter → 폼 로그인 인증 처리
BasicAuthenticationFilter → HTTP Basic 인증 처리
ExceptionTranslationFilter → 인증/인가 예외 처리
FilterSecurityInterceptor → 최종 권한 체크

Spring Security 동작 흐름 (폼 로그인 예시)

사용자가 /login에 POST 요청 (아이디/비밀번호 제출)
UsernamePasswordAuthenticationFilter에서 인증 처리
AuthenticationManager가 UserDetailsService 호출
→ DB 또는 메모리에서 사용자 정보 로드
비밀번호 비교 후 성공 시 Authentication 객체 생성
SecurityContext에 인증 정보 저장
이후 요청 시 SecurityContext에서 인증 정보 확인 후 권한 부여

기본 로그인 페이지

Spring Security를 의존성에 추가하면 /login 페이지가 자동 제공됩니다.

예시:

Username: user
Password: (콘솔에 랜덤 비번 출력)

실습 예시 – SecurityFilterChain 기본 설정

파일명: SecurityConfig.java

package com.example.security;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.web.SecurityFilterChain;
 
@Configuration // 설정 클래스임을 명시
public class SecurityConfig {
@Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http
            // 모든 요청은 인증 필요
            .authorizeHttpRequests(auth -> auth
                .anyRequest().authenticated() // 모든 요청 인증 필요
            )
            // 기본 로그인 폼 사용
            .formLogin(form -> form
                .permitAll() // 로그인 페이지는 누구나 접근 가능
            )
            // 로그아웃 설정
            .logout(logout -> logout
                .permitAll()
            );
return http.build();
    }
}

의존성 설정

Maven

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-security</artifactId>
</dependency>

Gradle (Groovy)

implementation 'org.springframework.boot:spring-boot-starter-security'

Gradle (Kotlin DSL)

implementation("org.springframework.boot:spring-boot-starter-security")

여기까지 하면 아무 설정 안 해도 기본 로그인 페이지가 뜨고, 콘솔에 랜덤 비밀번호가 출력됩니다.

[React] 리액트 이벤트 핸들링

dev-in-daily-life — Tue, 25 Mar 2025 22:07:53 +0900

- 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트(event)라고 한다.

- 예를 들어 버튼에 마우스 커서를 올렸을 때는 onmouseover 이벤트를 실행하고, 클릭했을 때는 onclick 이벤트를 실행한다. Form 요소는 값이 바뀔 때 onchange 이벤트를 실행한다.

리액트의 이벤트 시스템

- 리액트의 이벤트 시스템은 웹 브라우저의 HTML 이벤트와 인터페이스가 동일하기 때문에 사용법이 꽤 비슷하다.

- 다음 코드를 살펴 보자.

import { useState } from 'react';

const Say = () => {
const [message, setMessage] = useState('');
const onClickEnter = () => setMessage('안녕하세요!');
const onClickLeave = () => setMessage('안녕히 가세요!');
const [color, setColor] = useState('black');
return(
<div>
<button onClick={onClickEnter}>입장</button>
<button onClick={onClickLeave}>퇴장</button>
<h1 style={{ color }}>{message}</h1>
<button style= {{ color: 'red' }} onClick={() => setColor('red')}>빨간색</button>
<button style= {{ color: 'green' }} onClick={() => setColor('green')}>초록색</button>
<button style= {{ color: 'blue' }} onClick={() => setColor('blue')}>파란색</button>
</div>
);
};

export default Say;

이벤트를 사용할 때 주의 사항

1. 이벤트 이름은 카멜 표기법으로 작성한다.

- 예를 들어 HTML의 onclick은 리액트에서는 onClick으로 작성해야 한다.

- 또 onkeyup은 onKeyUp으로 작성한다.

2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달한다.

- HTML에서 이벤트를 설정할 때는 큰따옴표 안에 실행할 코드를 넣었지만, 리액트에서는 함수 형태의 객체를 전달한다.

- 앞서 버튼 예제에서도 화살표 함수 문법으로 함수를 만들어 전달했다. 이렇게 바로 만들어서 바로 전달해도 되고, 렌더링 부분 외부에 미리 만들어서 전달해도 된다.

<button style= {{ color: 'green' }} onClick={() => setColor('green')}>초록색</button>

3. DOM 요소에만 이벤트를 설정할 수 있다.

- 즉 div, button, input, form, span 등의 DOM 요소에는 이벤트를 설정할 수 있지만, 우리가 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다.

- 예를 들어 MyComponent에 onClick 값을 설정한다면 MyComponent를 클릭할 때 doSomething 함수를 실행하는 것이 아니라, 그냥 이름이 onClick인 props를 MyComponent에게 전달해 줄 뿐이다.

- 따라서 컴포넌트에 자체적으로 이벤트를 설정할 수는 없다. 하지만 전달받은 props를 컴포넌트 내부의 DOM 이벤트로 설정할 수는 있다.

{ /* (...) */ }

</div>

이벤트 종류

Clipboard
Touch
Composition
UI
Keyboard
Wheel
Focus
Media
Form
Image
Mouse
Animation
Selection
Transition

https://reactjs.org/docs/events.html

SyntheticEvent – React

A JavaScript library for building user interfaces

legacy.reactjs.org

이벤트 핸들링 연습하기

1. 컴포넌트 생성

- src/EventPractice.js 파일을 생성한다.

- 만든 후에 컴포넌트 초기 코드를 작성한다.

- 먼저 클래스형 컴포넌트로 작성하여 기능을 구현한다.

* EventPractice.js

import { Component} from 'react';

class EventPractice extends Component{
render(){
return(
<div>
<h1>이벤트 연습</h1>
</div>
);
}
}

export default EventPractice;

2. App.js에서 EventPractice 렌더링

* App.js

import EventPractice from './EventPractice';

const App = () => {
return (
<EventPractice />
);
}

export default App;

3. onChange 이벤트 설정

- EventPractice 컴포넌트에 input 요소를 렌더링하는 코드와 해당 요소에 onChange 이벤트를 설정하는 코드를 작성한다.

- 다음 코드를 EventPractice 컴포넌트의 render 메서드에 작성한다.

* EventPractice.js

import { Component} from 'react';

class EventPractice extends Component{
render(){
returnn(
<div>
<h1>이벤트 연습</h1>
<input
type="text"
name="message"
placeholder="아무거나 입력해 보세요"
onChange={
(e) => {
console.log(e);
}
}
/>
</div>
);
};
}

export default EventPractice;

- 코드를 저장하고, 웹 브라우저에서 크롬 개발자 도구를 열어 인풋에 아무 것이나 입력해 보자.

- 이벤트 객체가 콘솔에 나타났다.

* EventPractice.js의 onChange 설정 부분 다시 보기

onChange={
(e) => {
console.log(e);
}
}

- 여기서 콘솔에 기록되는 e 객체는 SyntheticEvent로 웹 브라우저의 네이티브 이벤트를 감싸는 객체다.

- 네이티브 이벤트와 인터페이스가 같으므로 순수 자바스크립트에서 HTML 이벤트를 다룰 때와 똑같이 사용하면 된다.

- SyntheicEvent는 네이티브 이벤트와 달리 이벤트가 끝나고 나면 이벤트가 초기화되므로 정보를 참조할 수 없다.

- 예를 들어 0.5초 뒤에 e 객체를 참조하면 e 객체 내부의 모든 값이 비워지게 된다.

- 만약 비동기적으로 이벤트 객체를 참조할 일이 있다면 e.persist() 함수를 호출해 주어야 한다.

- 에를 들어 onChange 이벤트가 발생할 때, 앞으로 변할 인풋 값인 e.target.value를 콘솔에 기록해 보자.

- 코드를 다음과 같이 수정해 보자.

* EventPractice.js의 onChange 코드 수정

onChange={
(e) => {
console.log(e.target.value);
}
}

- 값이 바뀔 때마다 바뀌는 값을 콘솔에 기록한다.

state에 input 값 담기

- 이번에는 state에 input 값을 담아 보자.

- 생성자 메서드인 constructor에서 state 초기값을 설정하고, 이벤트 핸들링 함수 내부에서 this.setState 메서드를 호출하여 state를 업데이트해 본다.

- 그 다음에는 input의 value 값을 state에 있는 값으로 설정한다.

* EventPractice.js

import { Component} from 'react';

class EventPractice extends Component{

state = {
message: ''
}

render(){
return(
<div>
<h1>이벤트 연습</h1>
<input
type="text"
name="message"
placeholder="아무거나 입력해 보세요"
value={this.state.message}
onChange={
(e) => {
this.setState({
message: e.target.value
});
}
}
/>
</div>
);
};
}

export default EventPractice;

- 코드를 저장하고, 인풋에 아무것이나 입력해 보자. 오류를 발생시키지 않고 제대로 입력할 수 있다면 state에 텍스트를 잘 담은 것이다.

버튼을 누를 때 comment 값을 공백으로 설정

- 입력한 값이 state에 잘 들어갔는지, 인풋에서 그 값을 제대로 반영하는지 검증해 보자.

- input 요소 코드 아래쪽에 button을 하나 만들고, 클릭 이벤트가 발생하면 현재 comment 값을 메시지 박스로 띄운 후 comment 값을 공백으로 설정하자.

* EventPractice.js

import { Component} from 'react';

class EventPractice extends Component{
state = {
message: ''
}

render(){
return(
<div>
<h1>이벤트 연습</h1>
<input
type="text"
name="message"
placeholder="아무거나 입력해 보세요"
value={this.state.message}
onChange={
(e) => {
this.setState({
message: e.target.value
});
}
}
/>
<button
onClick={() => {
alert(this.state.message);
this.setState({
message: ''
});
}}
>확인</button>
</div>
);
};
}

export default EventPractice;

- alert를 사용하여 현재 message 값을 화면에 표시하게 했다.

임의 메서드 만들기

- "이벤트에 실행할 JS 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달한다"에 따라, 이벤트를 처리할 때 렌더링을 하는 동시에 함수를 만들어서 전달해 주었다.

- 이 방법 대신 함수를 미리 준비하여 전달하는 방법도 있다. 성능상 차이는 없지만, 가독성은 훨씬 높다.
(하지만 상황에 따라 렌더링 메서드 내부에서 함수를 만드는 것이 더 편할 때도 있다)

- 앞서 onChange와 onClick에 전달한 함수를 따로 빼내서 컴포넌트 임의 메서드를 만들어 보자.

기본 방식

* EventPractice.js

import { Component} from 'react';

class EventPractice extends Component{
state = {
message: ''
}

constructor(props){
super(props);
this.handleChange = this.handleChange.bind(this);
this.handleClick = this.handleClick.bind(this);
}

handleChange(e){
this.setState({
message: e.target.value
});
}

handleClick(){
alert(this.state.message);
this.setState({
message: ''
});
}

render(){
return(
<div>
<h1>이벤트 연습</h1>
<input
type="text"
name="message"
placeholder="아무거나 입력해 보세요"
value={this.state.message}
onChange={this.handleChange}
/>
<button
onClick={this.handleClick}
>확인</button>
</div>
);
};
}

export default EventPractice;

- 함수가 호출될 때 this는 호출부에 따라 결정되므로, 클래스의 임의 메서드가 특정 HTML 요소의 이벤트로 등록되는 과정에서 메서드와 this의 관계가 끊어져 버린다.

- 이 때문에 임의 메서드가 이벤트로 등록되어도 this를 컴포넌트 자신으로 제대로 가리키기 위해서는 메서드를 this와 바인딩(binding)하는 작업이 필요하다.

- 만약 바인딩하지 않는 경우라면 this가 undefined를 가리키게 된다.

- 현재 constructor 함수에서 함수를 바인딩하는 작업이 이루어지고 있다.

Property Initializer Syntax를 사용한 메서드 작성

- 메서드 바인딩은 생성자 메서드에서 하는 것이 정석이다.

- 하지만 이 방식이 불편하다고 느낄 수 있다. 새 메서드를 만들 때 마다 constructor를 수정해야 하기 때문이다.

- 이 작업을 좀 더 간단하게 하는 방법이 있으며, 바로 바벨의 transform-class-properties 문법을 사용하여 화살표 함수 형태로 메서드를 정의하는 것이다.

- 이 문법을 사용하면 코드가 어떻게 변하는지 한번 보자.

* EventPractice.js

import {Component} from 'react';

class EventPractice extends Component{
state = {
message: ''
}

handleChange = (e) => {
this.setState({
message: e.target.value
});
}

handleClick = (e) => {
alert(this.state.message);
this.setState({
message: ''
});
}

render(){
return(
<div>
<h1>이벤트 연습</h1>
<input type="text" name="message" placeholder="아무거나 입력하세요."
value={this.state.message}
onChange={this.handleChange }/>
<button onClick={this.handleClick}>확인</button>
</div>
);
}
}

export default EventPractice;

- 훨씬 깔끔해졌다.

input 여러 개 다루기

- 우리는 input 값을 state에 넣는 방법을 배웠다. 하지만 input이 여러 개일 때는 어떻게 작업해야 하는가?

- event 객체를 활용하며, e.target.name 값을 사용하면 된다.

- onChange 이벤트 핸들러에서 e.target.name은 해당 인풋의 name을 가리킨다. 지금은 message 일 것이다.

- 이 값을 사용하여 state를 설정하면 쉽게 해결할 수 있다. 코드를 한번 살펴 보자.

- 다음 코드에서는 render 함수에서 name 값이 username인 input을 렌더링해 주었고, state 쪽에도 username이라는 값을 추가해 주었다.

- 그리고 handleChange도 조금 변경했다.

* EventPractice.js

import {Component} from 'react';

class EventPractice extends Component{

state = {
username: '',
message: ''
}

handleChange = (e) => {
this.setState({
[e.target.name]: e.target.value
});
}

handleClick = () => {
alert(this.state.username + ': '+ this.state.message);
this.setState({
username: '',
message: ''
});
}

render(){
return(
<div>
<h1>이벤트 연습</h1>
<input type="text" name="username" placeholder="사용자명"
value={this.state.username}
onChange={this.handleChange }/>

<input type="text" name="message" placeholder="아무거나 입력하세요."
value={this.state.message}
onChange={this.handleChange }/>
<button onClick={this.handleClick}>확인</button>
</div>
);
}
}

export default EventPractice;

- 위에서는 다음 코드가 핵심이다.

* EventPractice.js

handleChange = (e) => {
this.setState({
[e.target.name]: e.target.value
});
}

- 객체 안에서 key를 [ ]로 감싸면 그 안에 넣은 레퍼런스가 가리키는 실제 값이 key 값으로 사용된다.

- 예를 들어 다음과 같은 객체를 만들면

const name = 'variantKey';

const object = {

[name] : 'value'

};

- 결과는 다음과 같다.

{

'varianKey' : 'value'

}

onKeyPress 이벤트 핸들링

- 이번에는 키를 눌렀을 때 발생하는 KeyPress 이벤트를 처리하는 방법을 알아보자.

=> 현재 onKeyPress는 deprecated 되었다. 따라서 onKeyDown으로 바꿔 사용한다.

- comment 인풋에서 [Enter]를 눌렀을 때 handleClick 메서드를 호출하도록 코드를 작성한다.

* EventPractice.js

import {Component} from 'react';

class EventPractice extends Component{
state = {
username: '',
message: ''
}

handleChange = (e) => {
this.setState({
[e.target.name]: e.target.value
});
}

handleClick = () => {
alert(this.state.username + ': '+ this.state.message);
this.setState({
username: '',
message: ''
});
}

handleKeyDown = (e) => {
if(e.key === 'Enter'){
this.handleClick();
}
}

render(){
return(
<div>
<h1>이벤트 연습</h1>
<input type="text" name="username" placeholder="사용자명"
value={this.state.username}
onChange={this.handleChange }/>

<input type="text" name="message" placeholder="아무거나 입력하세요."
value={this.state.message}
onChange={this.handleChange }
onKeyDown={this.handleKeyDown}/>
<button onClick={this.handleClick}>확인</button>
</div>
);
}
}

export default EventPractice;

- 두 번째 텍스트 인풋에서 텍스트를 입력하고 [Enter]를 눌러 보자. handleCLick 메서드가 실행되었는가?

함수 컴포넌트로 구현해 보기

- 앞 페이지에서 작성한 것을 함수 컴포넌트로도 똑같이 구현할 수 있다. 기존 EventPractice 컴포넌트를 모두 지우고 다음과 같이 작성해 본다.

* EventPractice.js

import { useState } from 'react';

const EventPractice = () => {
const [username, setUsername] = useState('');
const [message, setMessage ] = useState('');
const onChangeUsername = e => setUsername(e.target.value);
const onChangeMessage = e => setMessage(e.target.value);
const onClick = () => {
alert(username + ': ' + message);
setUsername('');
setMessage('');
};
const onKeyDown = e => {
if(e.key === 'Enter'){
onClick();
}
};

return(
<div>
<h1>이벤트 연습</h1>
<input type="text" name="username" placeholder="사용자명" value={username} onChange={onChangeUsername} />
<input type="text" name="message" placeholder="아무거나 입력해 보세요" value={message} onChange={onChangeMessage} onKeyDown={onKeyDown} />
<button onClick={onClick}>확인</button>
</div>
);
}

export default EventPractice;

- 기능이 이전과 같이 잘 작동하는가?

- 위 코드에서는 e.target.name을 활용하지 않고 onChange 관련 함수 두 개를 따로 만들어 주었다.

- input이 두 개밖에 없다면 이런 코드도 나쁘지는 않으나 input의 개수가 많아질 것 같으면 e.target.name을 활용하는 것이 더 좋을 수도 있다.

- 이번에는 useState를 통해 사용하는 상태에 문자열이 아닌 객체를 넣어 본다. 코드를 다음과 같이 수정해 본다.

* EventPractice.js

import { useState } from 'react';

const EventPractice = () => {
const [form, setForm] = useState({
username: '',
message: ''
});

const { username, message } = form;
const onChange = e => {
const nextForm = {
...form, // 기존의 form 내용을 이 자리에 복사한 뒤
[e.target.name]: e.target.value // 원하는 값을 덮어 씌우기
};
setForm(nextForm);
}

const onClick = () => {
alert(username + ': ' + message);
setForm({
username: '',
message: ''
});
};

const onKeyDown = e => {
if(e.key === 'Enter'){
onClick();
}
};

return(
<div>
<h1>이벤트 연습</h1>
<input type="text" name="username" placeholder="사용자명" value={username} onChange={onChange} />
<input type="text" name="message" placeholder="아무거나 입력해 보세요" value={message} onChange={onChange} onKeyDown={onKeyDown} />
<button onClick={onClick}>확인</button>
</div>
);
}

export default EventPractice;

- 코드를 저장하고 기능이 잘 작동하는지 확인해 보자.

- e.target.name 값을 활용하려면, 위와 같이 useState를 쓸 때 input 값들이 들어 있는 form 객체를 사용해 주면 된다.

[React] 리액트 state

dev-in-daily-life — Mon, 24 Mar 2025 21:37:34 +0900

- 리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.

- props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다.

- props를 바꾸려면 부모 컴포넌트에서 바꿔 줘야 한다.

- 리액트에는 두 가지 종류의 state가 있다.

- 하나는 클래스형 컴포넌트가 지니고 있는 state이고, 다른 하나는 함수 컴포넌트에서 useState라는 함수를 통해 사용하는 state 이다.

클래스형 컴포넌트의 state

- 새로운 컴포넌트를 만들자. Counter.js 파일을 src 디렉터리에 생성하여 다음 코드를 작성해 보자.

* Counter.js

import { Component } from 'react';

class Counter extends Component {
constructor(props){
super(props);
// state의 초기값 설정하기
this.state = {
number: 0
};
}

render() {
const { number } = this.state; // state를 조회할 때는 this.state로 조회한다.
return(
<div>
<h1>{number}</h1>
<button
// onClick을 통해 버튼이 클릭되었을 때 호출할 함수를 지정한다.
onClick={()=>{
// this.setState를 사용해 state에 새로운 값을 넣을 수 있다.
this.setState({ number: number + 1});
}}>+1</button>
</div>
);
}

}

export default Counter;

- 위 파일에서 각 코드가 어떤 역할을 하는지 알아 보자.

- 컴포넌트에 state를 설정할 때는 다음과 같이 constructor 메서드를 작성하여 설정한다.

constructor(props){
super(props);
// state의 초기값 설정하기
this.state = {
number: 0
};
}

- 이는 생성자 메서드인데, 클래스형 컴포넌트에서 constructor를 작성할 때는 반드시 super(props)를 호출해 주어야 한다.

- 이 함수가 호출되면 현재 클래스형 컴포넌트가 상속받고 있는 리액트의 Component 클래스가 지닌 생성자 함수를 호출해 준다.

- 그다음에는 this.state 값에 초기값을 설정해 주었다. 컴포넌트의 state는 객체 형식이어야 한다.

- 이제 render 함수를 확인해 보자.

render() {
const { number } = this.state; // state를 조회할 때는 this.state로 조회한다.
return(
<div>
<h1>{number}</h1>
<button
// onClick을 통해 버튼이 클릭되었을 때 호출할 함수를 지정한다.
onClick={()=>{
// this.setState를 사용해 state에 새로운 값을 넣을 수 있다.
this.setState({ number: number + 1});
}}>+1</button>
</div>
);
}

- render 함수에서 현재 state를 조회할 때는 this.state를 조회하면 된다. 그리고 button 안에 onClick이라는 값을 props로 넣어 주었는데, 이는 버튼이 클릭될 때 호출시킬 함수를 설정할 수 있게 해 준다. 이를 이벤트를 설정한다고 한다.

- 이벤트로 설정할 함수를 넣어 줄 때는 화살표 함수 문법을 사용하여 넣어 주어야 한다.

- 함수 내부에서는 this.setState라는 함수를 사용했는데, 이 함수가 state 값을 바꿀 수 있게 해 준다.

- 코드 작성을 완료 후 Counter 컴포넌트를 App에서 불러와 렌더링하도록 한다.

* App.js

import Counter from './Counter';

const App = () => {
return (
<Counter />
);
}

export default App;

- 브라우저에서 숫자와 버튼이 나타났는가? 버튼을 눌러 보면 숫자가 1씩 올라갈 것이다.

state 객체 안에 여러 값이 있을 때

- state 객체 안에는 여러 값이 있을 수 있다. Counter 컴포넌트를 다음과 같이 수정해 보자.

* Counter.js

import { Component } from 'react';

class Counter extends Component {
constructor(props){
super(props);
// state의 초기값 설정하기
this.state = {
number: 0,
fixedNumber: 0
};
}

render() {
const { number, fixedNumber } = this.state; // state를 조회할 때는 this.state로 조회한다.
return(
<div>
<h1>{number}</h1>
<h2>바뀌지 않는 값: {fixedNumber}</h2>
<button
// onClick을 통해 버튼이 클릭되었을 때 호출할 함수를 지정한다.
onClick={()=>{
// this.setState를 사용해 state에 새로운 값을 넣을 수 있다.
this.setState({ number: number + 1});
}}>+1</button>
</div>
);
}
}

export default Counter;

- 현재 state 안에 fixedNumber라는 또 다른 값을 추가했다. 버튼이 클릭될 때 fixedNumber 값은 그대로 두고 number 값만 바꿀 것인데, 그렇다고 해서 this.setState 함수를 사용할 때 인자로 전달되는 개체 내부에 fixedNumber를 넣어 주지는 않았다.

- this.setState 함수는 인자로 전달된 개체 안에 들어 있는 값만 바꾸어 준다.

- 코드를 저장하고 브라우저를 열어서 버튼을 눌러 보자. 맨 위에 있는 숫자만 업데이트되고 하단의 숫자는 고정 돼 있을 것이다.

state를 constructor에서 꺼내기

- 앞에서 state의 초깃값을 지정하기 위해 constructor 메서드를 선언해 주었는데, 또 다른 방식으로도 state의 초기값을 지정해 줄 수 있다.

- 코드를 다음과 같이 수정한다.

* Counter.js

import { Component } from 'react';

class Counter extends Component {
state = {
number: 0,
fixedNumber: 0,
};

render() {
const { number, fixedNumber } = this.state; // state를 조회할 때는 this.state로 조회한다.
return (
<div>
<h1>{number}</h1>
<h2>바뀌지 않는 값: {fixedNumber}</h2>
<button
// onClick을 통해 버튼이 클릭되었을 때 호출할 함수를 지정한다.
onClick={() => {
// this.setState를 사용해 state에 새로운 값을 넣을 수 있다.
this.setState({ number: number + 1 });
}}
>
+1
</button>
</div>
);
}
}

export default Counter;

- 이렇게 하면 constructor 메서드를 선언하지 않고도 state 초기값을 설정할 수 있다.

this.setState에 객체 대신 함수 인자 전달하기

- this.setState를 사용해 state 값을 업데이트할 때는 상태가 비동기적으로 업데이트된다.

- 만약 다음과 같이 onClick에 설정한 함수 내부에서 this.setState를 두 번 호출하면 어떻게 될까?

* Counter.js

<button
// onClick을 통해 버튼이 클릭되었을 때 호출할 함수를 지정한다.
onClick={()=>{
// this.setState를 사용해 state에 새로운 값을 넣을 수 있다.
this.setState({ number: number + 1});
this.setState({ number: this.state.number + 1});
}}>+1</button>

- 코드를 위와 같이 작성하면 this.setState를 두 번 사용하는 것임에도 불구하고 버튼을 클릭할 때 숫자가 1씩 더해진다.

- this.setState를 사용한다고 해서 state 값이 바로 바뀌지는 않기 때문이다.

- 위에 대한 해결책은 this.setState를 사용할 때 객체 대신에 함수를 인자로 넣어 주는 것이다.

- this.setState의 인자로 함수를 넣어 줄 때는 코드를 다음과 같은 형식으로 작성한다.

this.setState((prevState, props) => {
return {
// 업데이트할 내용
}
})

- 여기서 prevState는 기존 상태이고, props는 현재 지니고 있는 props를 가리킨다.

- 만약 업데이트 과정에서 props가 필요하지 않다면 생략해도 된다.

- 기존 코드를 다음과 같이 작성한다.

* Counter.js - button

<button
// onClick을 통해 버튼이 클릭되었을 때 호출할 함수를 지정한다.
onClick={()=>{
this.setState(prevState => {
return {
number: prevState.number + 1
};
});

// 위 코드와 아래 코드는 완전히 똑같은 기능을 한다.
// 아래 코드는 함수에서 바로 객체를 반환한다는 의미다.
this.setState(prevState =>({
number: prevState.number + 1
}));
}}
>+1</button>

- 화살표 함수에서 값을 바로 반환하고 싶으면 코드 블록 { }를 생략하면 된다.

- 예를 들어, 파라미터 a와 b를 받아 와서 합을 구해 주는 함수를 작성하고 싶다면 다음과 같이 작성할 수 있다.

const sum = (a, b) => a + b;

- onClick에서 두 번째로 this.setState 함수를 사용할 때는 화살표 함수에서 바로 객체를 반환하도록 했기 때문에 prevState => ({ })와 같은 형태로 코드가 이루어진다.

this.setState가 끝난 후 특정 작업 실행하기

- setState를 사용하여 값을 업데이트하고 난 다음에 특정 작업을 하고 싶을 때는 setState의 두 번째 파라미터로 콜백(callback) 함수를 등록하여 작업을 처리할 수 있다.

- onClick 함수를 다음과 같이 수정한다.

* Counter.js - button

<button
// onClick을 통해 버튼이 클릭되었을 때 호출할 함수를 지정한다.
onClick={()=>{
this.setState(
{
number: number + 1
},
() => {
console.log('방금 setState가 호출되었습니다.');
console.log(this.state);
}
);
}}>+1</button>

- 이렇게 콜백 함수를 등록한 뒤 브라우저를 열어서 버튼을 누르고 개발자 도구의 [Console] 탭을 확인해 보자.

함수 컴포넌트에서 useState 사용하기

- 리액트 16.8 이전 버전에서는 함수 컴포넌트에서 state를 사용할 수 없었지만, 이후 버전에서는 useState라는 함수를 사용하여 함수 컴포넌트에서도 state를 사용할 수 있게 되었다.

배열 비구조화 할당

- Hooks를 사용하기 전에 배열 비구조화 할당이라는 것을 알아보자.

- 배열 비구조화 할당은 객체 비구조화 할당과 비슷하며, 배열 안에 들어 있는 값을 쉽게 추출할 수 있도록 해 주는 문법이다.

- 다음 코드를 확인하자.

const array = [1, 2];

const one = array[0];

const two = array[1];

- array 안에 있는 값을 one과 two에 담아 주는 코드인데, 위 코드는 배열 비구조화 할당을 사용하면 다음과 같이 표현할 수 있다.

const array = [1, 2];

const [one, two] = array;

- 코드가 훨씬 깔끔하다.

useState 사용하기

- 배열 비구조화 할당 문법을 알고 나면 useState 사용 방법을 쉽게 이해할 수 있다.

- 새 컴포넌트를 만들어서 useState를 사용해 보자.

- src 디렉터리에 Say.js 파일을 생성하고 다음 코드를 작성한다.

* Say.js

import { useState } from 'react';

const Say = () => {
const [message, setMessage] = useState('');
const onClickEnter = () => setMessage('안녕하세요!');
const onClickLeave = () => setMessage('안녕히 가세요!');
return(
<div>
<button onClick={onClickEnter}>입장</button>
<button onClick={onClickLeave}>퇴장</button>
<h1>{message}</h1>
</div>
);
};

export default Say;

- useState 함수의 인자에는 상태의 초기값을 넣어 준다.

- 클래스형 컴포넌트에서의 state 초기값은 객체 형태를 넣어 주어야 한다고 배웠는데, useState에서는 반드시 객체가 아니어도 상관없다.

- 값의 형태는 자유이다. 숫자일 수도, 문자열일 수도, 배열일 수도 있다.

- useState( ) 함수를 호출하면 배열이 반환되는데, 배열의 첫 번째 원소는 현재 상태이고, 두 번째 원소는 상태를 바꾸어 주는 함수이다. 이 함수를 세터(Setter)라고 한다.

- 그리고 배열 비구조화 할당을 통해 이름을 자유롭게 정할 수 있다.

- 현재 message와 setMessage라고 이름을 설정했는데, text와 setText라고 이름을 자유롭게 바꾸어 주어도 상관없다.

- Say 컴포넌트를 App에서 렌더링해 보고 [입장] 버튼과 [퇴장] 버튼을 눌러 보자.

* App.js

import Say from './Say';

const App = () => {
return (
<Say />
);
}

export default App;

한 컴포넌트에서 useState 여러 번 사용하기

- useState는 여러 번 사용해도 상관없다. 또 다른 상태를 useState로 관리해 보자.

* Say.js

import { useState } from 'react';

const Say = () => {
const [message, setMessage] = useState('');
const onClickEnter = () => setMessage('안녕하세요!');
const onClickLeave = () => setMessage('안녕히 가세요!');

const [color, setColor] = useState('black');

return(
<div>
<button onClick={onClickEnter}>입장</button>
<button onClick={onClickLeave}>퇴장</button>
<h1 style={{ color }}>{message}</h1>
<button style= {{ color: 'red' }} onClick={() => setColor('red')}>빨간색</button>
<button style= {{ color: 'green' }} onClick={() => setColor('green')}>초록색</button>
<button style= {{ color: 'blue' }} onClick={() => setColor('blue')}>파란색</button>
</div>
);
};

export default Say;

- 코드를 저장하고 [입장] 버튼을 눌러서 텍스트를 띄워 보자. 그리고 색상이 표시되어 있는 버튼을 눌러 보자. 텍스트 색상이 잘 바뀌는가?

state 사용 시 주의사항

- 클래스형 컴포넌트든 함수 컴포넌트든 state를 사용할 때는 주의해야 할 사항이 있다.

- state 값을 바꾸어야 할 때는 setState 혹은 useState를 통해 전달받은 세터 함수를 사용해야 한다.

- 예를 들어 다음 코드는 잘못된 코드이다.

// 클래스형 컴포넌트에서...
this.state.number = this.state.number + 1;
this.state.array = this.array.push(2);
this.state.object.value = 5;

// 함수 컴포넌트에서...
const [object, setObject] = useState({ a: 1, b: 1});
object.b = 2;

- 배열이나 객체를 업데이트해야 할 경우에는 어떻게 해야 할까?

- 이런 상황에서는 배열이나 객체 사본을 만들고 그 사본에 값을 업데이트한 후, 그 사본의 상태를 setState 혹은 세터 함수를 통해 업데이트한다.

- 사본을 만들어서 업데이트하는 예시는 다음과 같다.

// 객체 다루기
const object = { a: 1, b: 2, c: 3};
const nextObject = { ...object, b: 2}; // 사본을 만들어서 b 값만 덮어 쓰기

// 배열 다루기
const array = [
{ id: 1, value : true },
{ id: 2, value : true },
{ id: 3, value : false },
];
let nextArray = array.concat({ id: 4}); // 새 항목 추가
nextArray.filter(item => item.id !== 2); // id가 2인 항목 제거
nextArray.map(item => (item.id === 1 ? { ...item, value: false } : item)); // id가 1인 항목의 value를 false로 설정

- 객체에 대한사본을 만들 때는 spread 연산자라 불리는 ...을 사용하여 처리하고, 배열에 대한 사본을 만들 때는 배열의 내장 함수들을 활용한다.

[React] 리액트 props

dev-in-daily-life — Thu, 13 Mar 2025 21:27:42 +0900

Props

- props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소다.

- props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다.

JSX 내부에서 props 렌더링

- MyComponent를 수정해 해당 컴포넌트에서 name이라는 props를 렌더링하도록 설정한다.

- props 값은 컴포넌트 함수의 파라미터로 받아 와서 사용할 수 있다.

- props를 렌더링할 때 JSX 내부에서 { } 기호로 감싸 주면 된다.

* src/MyComponent.js

const MyComponent = props => {
return <div>안녕하세요, 제 이름은 {props.name}입니다.</div>
};

export default MyComponent;

컴포넌트 사용 시 props 값 지정

- App 컴포넌트에서 MyComponent의 props 값을 지정한다.

* App.js

import MyComponent from './MyComponent';

const App = () => {
return <MyComponent name="React" />;
};

export default App;

결과

props 기본값 설정: defaultProps

- props 값을 따로 지정하지 않았을 때 보여 줄 기본 값을 설정하는 defaultProps에 대해 알아 보자.

- 이 값을 설정하는 방법은 다음과 같다.

* App.js

import MyComponent from './MyComponent';

const App = () => {
return <MyComponent />
}

export default App;

* MyComponent.js

const MyComponent = (props) => {
return <div>안녕하세요, 제 이름은 {props.name}입니다.</div>;
};

MyComponent.defaultProps = {
name: '기본 이름',
};

export default MyComponent;

태그 사이의 내용을 보여주는 children

- 리액트 컴포넌트를 사용할 때 컴포넌트 태그 사이의 내용을 보여 주는 props가 있는데, 바로 children이다.

* App.js

import MyComponent from './MyComponent';

const App = () => {
return <MyComponent>리액트</MyComponent>;
};

export default App;

- 위 코드에서 MyComponent 태그 사이에 작성한 리액트라는 문자열을 MyComponent 내부에서 보여 주려면 props.children 값을 보여 주어야 한다.

* MyComponent.js

children 결과

비구조화 할당 문법을 통해 props 내부 값 추출하기

- MyComponent에서 props 값을 조회할 때마다 props.name, props.children과 같이 props. 이라는 키워드를 앞에 붙여 주고 있다.

- 이러한 작업을 더 편하게 하기 위해 ES6의 비구조화 할당 문법을 사용하여 내부 값을 바로 추출하는 방법을 알아본다.

* MyComponent.js

- 이렇게 코드를 작성하면 name 값과 children 값을 더 짧은 코드로 사용할 수 있다.

- 방금 사용한, 객체에서 값을 추출하는 문법을 비구조화 할당(destructing assignment)이라고 부른다. 이 문법은 구조 분해 문법이라고도 불리며, 함수의 파라미터 부분에서도 사용할 수 있다.

- 만약 함수의 파라미터가 객체라면 그 값을 바로 비구조화해서 사용하는 것이다.

* MyComponent.js

propTypes를 통한 props 검증

- 컴포넌트의 필수 props를 지정하거나 props의 타입(type)을 지정할 때는 propTypes를 사용한다.

- 컴포넌트의 propTypes를 지정하는 방법은 defaultProp을 설정하는 것과 비슷하다.

- 우선 propTypes를 사용하려면 코드 상단에 import 구문을 사용해 불러와야 한다.

* MyComponent.js

import PropTypes from 'prop-types';

const MyComponent = ({name, children}) => {
( ... )

- PropTypes를 불러왔다면 코드 하단에 다음과 같이 입력해 보자.

* MyComponent.js

import PropTypes from 'prop-types';

const MyComponent = ({name, children}) => {
return (
<div>
안녕하세요, 제 이름은 {name}입니다.
<br />
children 값은 {children}
입니다.
</div>
);
};

MyComponent.defaultProps = {
name: '기본 이름',
};

MyComponent.propTypes = {
name: PropTypes.string
}

export default MyComponent;

- 이렇게 설정해 주면 name 값은 무조건 문자열(string) 형태로 전달해야 한다는 것을 의미한다.

- App 컴포넌트에서 name 값을 문자열이 아닌 숫자로 전달할 뒤 개발자 도구의 Console 탭을 확인해 본다.

* App.js

import MyComponent from './MyComponent';

const App = () => {
return <MyComponent name={3}>리액트</MyComponent>;
}

export default App;

- 만약 컴포넌트에 설정한 props가 propTypes에서 지정한 형태와 일치하지 않는다면 브라우저 개발자 도구의 Console 탭에 다음과 같은 결과가 나타난다.

타입이 일치하지 않은 props

- 값이 나타나기는 했지만, 콘솔에 경고 메시지를 출력하여 개발자에게 propTypes가 잘못되었다는 것을 알려 준다. 오류 메시지를 확인했다면 name 값을 제대로 설정해 준다.

* App.js

import MyComponent from './MyComponent';

const App = () => {
return <MyComponent name="React">리액트</MyComponent>;
}

export default App;

isRequired를 사용해 필수 propTypes 설정

- propTypes를 지정하지 않았을 때 경고 메시지를 띄워 주는 작업을 해보자. propTypes를 지정할 때 뒤에 isRequired를 붙여 주면 된다.

- 이번에는 favoriteNumber라는 숫자를 필수 props로 지정해 보자.

* MyComponent.js

import PropTypes from 'prop-types';

const MyComponent = ({name, favoriteNumber, children}) => {
return (
<div>
안녕하세요, 제 이름은 {name}입니다.
<br />
children 값은 {children}
입니다.
<br />
제가 좋아하는 숫자는 {favoriteNumber}입니다.
</div>
);
};

MyComponent.defaultProps = {
name: '기본 이름',
};

MyComponent.propTypes = {
name: PropTypes.string,
favoriteNumber: PropTypes.number.isRequired
}

export default MyComponent;

- 코드를 저장하고 다시 개발자 도구의 Console을 확인해 보자. 아직 favoriteNumber를 설정하지 않았기 때문에 다음과 같은 경고가 나타날 것이다.

필수 값 누락 시 발생하는 경고

- 경고를 확인했다면 MyComponent에게 favoriteNumber 값을 제대로 전달해 보자.

* App.js

import MyComponent from './MyComponent';

const App = () => {
return (
<MyComponent name="React" favortieNumber={1}>
리액트
</MyComponent>
);
}

export default App;

더 많은 PropTypes 종류

- PropTypes에서는 여러 가지 종류를 설정할 수 있다.

종류	설명
array	배열
arrayOf(다른 PropType)	특정 PropType으로 이루어진 배열을 의미한다. 예를 들어 arrayOf(PropTypes.number)는 숫자로 이루어진 배열이다.
bool	true 혹은 false 값
func	함수
number	숫자
object	객체
string	문자열
symbol	ES6의 Symbol
node	렌더링할 수 있는 모든 것(숫자, 문자열, 혹은 JSX 코드. children도 note PropType이다.)
instanceOf(클래스)	특정 클래스의 인스턴스(예: instanceOf(MyClass))
oneOf(['dog', 'cat'])	주어진 배열 요소 중 값 하나
oneOfType([React.PropTypes.string, PropTypes.number])	주어진 배열 안의 종류 중 하나
objectOf(React.PropTypes.number)	객체의 모든 키 값이 인자로 주어진 PropType인 객체
shape({ name: PropTypes.string, num: PropTypes.number})	주어진 스키마를 가진 객체
any	아무 종류

- 더 자세한 정보는 https://github.com/facebook/prop-types 에서 확인할 수 있다.

클래스형 컴포넌트에서 props 사용

- 클래스형 컴포넌트에서 props를 사용할 때는 render 함수에서 this.props를 조회하면 된다.

- 그리고 defaultProps와 propTypes는 똑같은 방식으로 설정할 수 있다.

- MyComponent를 다음과 같이 클래스형 컴포넌트로 변환해 보자.

* MyComponent.js

import { Component } from 'react';
import PropTypes from 'prop-types';

class MyComponent extends Component {
render() {
const { name, favoriteNumber, children } = this.props; // 비구조화 할당

return (
<div>
안녕하세요, 제 이름은 {name}입니다.
<br />
children 값은 {children}
입니다.
<br />
제일 좋아하는 숫자는 {favoriteNumber}입니다.
</div>
);
}
}

MyComponent.defaultProps = {
name: '기본 이름',
};

MyComponent.propTypes = {
name: PropTypes.string,
favoriteNumber: PropTypes.number.isRequired,
};

export default MyComponent;

- 클래스형 컴포넌트에서 defaultProps와 propTypes를 설정할 때 class 내부에서 지정하는 방법도 있다.

* MyComponent.js

import { Component } from 'react';
import PropTypes from 'prop-types';

class MyComponent extends Component {
static defaultProps = {
name: '기본 이름',
};

static propTypes = {
name: PropTypes.string,
favoriteNumber: PropTypes.number.isRequired,
};

render() {
const { name, favoriteNumber, children } = this.props; // 비구조화 할당
return (
<div>
안녕하세요, 제 이름은 {name}입니다.
<br />
children 값은 {children}
입니다.
<br />
제일 좋아하는 숫자는 {favoriteNumber}입니다.
</div>
);
}
}

export default MyComponent;

[React] 스타일링

dev-in-daily-life — Thu, 6 Mar 2025 21:39:29 +0900

인라인 스타일링

- 리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어 주어야 한다.

- 스타일 이름 중에서 background-color 처럼 - 문자가 포함되는 이름이 있는데, 이러한 이름은 - 를 제거하고 카멜 표기법으로 작성해야 한다. (backgroundColor)

import './App.css';

function App() {
    const name = '리액트';
    const style = {
        backgroundColor : 'black',
        color : 'aqua',
        fontSize: '48px',       // font-size -> fontSize
        fontWeight: 'bold',     // font-weight -> fontWeight
        padding: 16             // 단위 생략 시 px로 지정된다.
    };
    return <div style={style}>{name}</div>;
}
export default App;

- 위는 style 객체를 미리 선언하고 div의 style 값으로 지정했는데, 미리 선언하지 않고 바로 style 값을 지정하고 싶다면 다음과 같이 작성하면 된다.

import './App.css';
function App() {
    const name = '리액트';
    return <div style={{
        backgroundColor : 'black',
        color : 'aqua',
        fontSize: '48px',
        fontWeight: 'bold',
        padding: 16
    }}>{name}</div>;
}
export default App;

스타일링 결과

className

- 일반 HTML에서 CSS 클래스를 사용할 때는 <div class="myclass"></div>와 같이 class라는 속성을 설정한다.

- 하지만 JSX에서는 class가 아닌 className으로 설정해 주어야 한다.

- JSX를 작성할 때 CSS 클래스를 설정하는 과정에서 className이 아닌 class 값을 설정해도 스타일이

적용되기는 한다. 그러나 그렇게 사용하면 브라우저 개발자 도구의 Console 탭에 다음과 같은 경고가 나타난다.

class 사용 시 나타나는 경고

- 이전에는 class로 CSS 클래스를 설정할 때 오류가 발생하고 CSS 클래스가 적용되지 않았는데, 리액트 v16 이상부터는 class를 classname으로 변환시켜 주고 경고를 띄운다.

[React] undefined 렌더링하지 않기

dev-in-daily-life — Thu, 6 Mar 2025 21:36:10 +0900

- 리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하는 상황을 만들면 안 된다.

- 다음과 같은 코드는 오류를 발생시킨다.

import './App.css';

function App() {
  const name = undefined;
  return name;
}
export default App;

위 코드의 결과

- 어떤 값이 undefined 일수도 있다면, OR( || )연산자를 사용하면 해당 값이 undefined일 때 사용할 값을 지정할 수 있으므로 간단하게 오류를 방지할 수 있다.

import './App.css';

function App() {
  const name = undefined;
  return name || '값이 undefined입니다.';
}

export default App;

- 반면 JSX 내부에서 undefined를 렌더링하는 것은 괜찮다.

import './App.css';

function App() {
  const name = undefined;
  return <div>{name}</div>;
}
export default App;

- name 값이 undefined일 때 보여주고 싶은 문구가 있다면 다음과 같이 코드를 작성하며 된다.

import './App.css';

function App() {
  const name = undefined;
  return <div>{name || '리액트'}</div>;
}
export default App;

위 코드의 결과

[React] 조건부 연산자

dev-in-daily-life — Thu, 6 Mar 2025 21:29:59 +0900

- JSX 내부의 JS 표현식에서 if문을 사용할 수는 없다.

- 히지만 조건에 따라 다른 내용을 렌더링해야 할 때는 JSX 밖에서 if문을 사용하여 사전에 값을 설정하거나, { } 안에 조건부 연산자를
사용하면 된다.

- 조건부 연산자의 또 다른 이름은 삼항 연산자이다.

function App() {
  const name = '리액트';
  
  return (
    <div>
        {name === '리액트'?(
            <h1>리액트입니다.</h1>
        ) : (
            <h2>리액트가 아닙니다.</h2>
        )}
    </div>
  );
}

export default App;

- name 변수의 값이 '리액트' 인 경우에는 '리액트입니다.' 를 화면에 출력하고, name 변수의 값이 '리액트'가 아닌 경우 '리액트가 아닙니다.' 를 화면에 출력한다.

- 특정 조건을 만족할 때 내용을 보여주고, 만족하지 않을 때 아예 아무것도 렌더링 하지 않아야 하는 상황이 올 수 있다.
이럴 때도 조건부 연산자를 통해 구현할 수 있다.

import './App.css';

function App() {
  const name = '뤼왝트';
  return (
    <div>
        {name === '리액트'?<h1>리액트입니다.</h1>:null}
    </div>
  );
}
export default App;

- null을 렌더링하면 아무것도 보여 주지 않는다.

- 위보다 더 짧은 코드로 똑같은 작업을 할 수 있다. 다음과 같이 && 연산자를 사용해서 조건부 렌더링을 할 수 있다.

import './App.css';

function App() {
  const name = '뤼왝트';
  return (
    <div>
        {name === '리액트' && <h1>리액트입니다.</h1>}
    </div>
  );
}
export default App;

- && 연산자로 조건부 렌더링을 할 수 있는 이유는 리액트에서 false를 렌더링할 때는 null과 마찬가지로 아무것도 나타나지
않기 때문이다.